vue 如果有某个子元素就给父元素加样式，或者通过子元素显示来判断父元素是否显示

有这样一个场景，父元素是一个 div，然后里边有多个子元素，同时父元素上添加了很多样式
需求是：如果有子元素，那么就显示父元素，如果没有一个子元素，则父元素也不显示

代码结构：

<div class="more-css"><aaa v-if="isaaa" /><bbb v-if="isbbb" /><ccc v-if="isccc" /><ddd v-if="isddd" /><eee v-if="iseee" />
</div>

第一种做法

可以在父div上，加一个v-if，但是要把子元素所有的判断都列出来，如
<div class="more-css" v-if="isaaa || isbbb || isccc || isddd || iseee"></div>
元素少，判断少还好，否则，简直是噩梦

第二种做法

利用css的:has伪类

<div class="more-css check-show"><aaa class="child" v-if="isaaa" /><bbb class="child" v-if="isbbb" /><ccc class="child" v-if="isccc" /><ddd class="child" v-if="isddd" /><eee class="child" v-if="iseee" />
</div>//css
.check-show {display: none;
}
.check-show:has(.child) {display: block;
}

首先利用check-show这个class把父元素隐藏，然后.check-show:has(.child)此样式可以校验如果有子元素，再把父元素显示出来即可；
但是此方案有个缺点，就是has伪类的浏览器兼容比较差，ie全军覆没，无法使用

最终方案：

利用自定义指令：

<div class="more-css" v-show="isShow.num"><aaa v-child={data: isShow} class="child" v-if="isaaa" /><bbb v-child={data: isShow} class="child" v-if="isbbb" /><ccc v-child={data: isShow} class="child" v-if="isccc" /><ddd v-child={data: isShow} class="child" v-if="isddd" /><eee v-child={data: isShow} class="child" v-if="iseee" />
</div>//js
data() {return {isShow: {num: 0}}
},
directives: {child: {//被绑定元素插入父节点时调用inserted(_, binging) {binging.value.data.num++;},//只调用一次，指令与元素解绑时调用unbind(_, binging) {binging.value.data.num--;},}
}