Vue3之v-show不能放置于自定义组件

控制台警告Runtime directive used on component with non-element root node. The directives will not function as intended.

原因
意思是自定义指令不能放到组件上,而是要放到自有的元素上

也就是这里用到的v-show不能放在自定义组件上,而是放在原来就有的标签上

比如之前的是这样子,v-show 指令用在了自定义组件edit-attribute-box身上,就警告了

<edit-attribute-box v-show="popupStore.showEditAttributeBox"></edit-attribute-box>

解决
外面套一层不是自定义组件的东东就可以,我这里套了一层div,你也可以嵌套一层template

<div v-show="popupStore.showEditAttributeBox">
    <edit-attribute-box></edit-attribute-box>
</div>

// 下面这个不行，会报错

<template  v-show="popupStore.showEditAttributeBox">
    <edit-attribute-box></edit-attribute-box>
</template>