vue控制台警告Runtime directive used on component with non-element root node.

未成年梦想

已于 2023-04-26 19:15:38 修改

阅读量3.5w

点赞数 21

分类专栏： HTML vue javascript 文章标签： vue.js javascript ecmascript

于 2022-09-01 08:22:48 首次发布

本文链接：https://blog.youkuaiyun.com/u014582342/article/details/126635727

版权

javascript 同时被 3 个专栏收录

89 篇文章

订阅专栏

HTML

76 篇文章

订阅专栏

vue

39 篇文章

订阅专栏

本文讲述了控制台关于自定义指令的警告，原因是不能将指令用于非元素根节点。解决方法包括将v-show指令移至div或其他非自定义组件上，并提到了新版本中关于<template>标签的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制台警告提示信息

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

原因和解决

原因

意思是自定义指令不能放到组件上，而是要放到自有的元素上,也就是这里用到的v-show不能放在自定义组件上,而是放在原来就有的标签上,所以这里套了一层div
比如之前的是这样子,v-show指令用在了自定义组件ImageAddR身上,就警告了

<ImageAddR ref="ImageAddR" v-show="materialType === 'image'"></ImageAddR>

解决

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

<div v-show="materialType === 'image'">
    <ImageAddR ref="ImageAddR" ></ImageAddR>
</div>

或者(新版本好像会报警告'v-show' directives cannot be put on <template> tags)

<template v-show="materialType === 'image'">
    <ImageAddR ref="ImageAddR" ></ImageAddR>
</template>