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

更新时间：2023年06月29日 11:31:51 作者：w晚风

这篇文章主要为大家介绍了vue控制台警告Runtime directive used on component with non-element root node解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

控制台警告提示信息

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

如下

原因和解决

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

<UserAdd v-show="materialType" />

解决

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

<div v-show="materialType">
  <UserAdd />
</div>

或者

<template v-show="materialType">
  <UserAdd />
</template>

以上就是vue控制台警告Runtime directive used on component with non-element root node的详细内容，更多关于vue控制台警告的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

在vue项目中使用sass的配置方法
这篇文章主要介绍了在vue项目中使用sass的配置方法,需要的朋友可以参考下
2018-03-03
Vue实例的对象参数options的几个常用选项详解
今天小编就为大家分享一篇Vue实例的对象参数options的几个常用选项详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue.js移动端app之上拉加载以及下拉刷新实战
这篇文章主要介绍了vue.js移动端app之上拉加载以及下拉刷新实战，非常具有实用价值，需要的朋友可以参考下
2017-09-09
vue开发拖拽进度条滑动组件
这篇文章主要为大家详细介绍了vue开发拖拽进度条滑动组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
el-table多选toggleRowSelection不生效解决方案
这篇文章主要给大家介绍了关于el-table多选toggleRowSelection不生效的解决方案,文中通过图文以及代码将解决办法介绍的非常详细,需要的朋友可以参考下
2023-08-08
vue中实现图片压缩 file文件的方法
这篇文章主要介绍了vue中实现图片压缩 file文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
Vue导入Echarts实现折线散点图
这篇文章主要为大家详细介绍了Vue导入Echarts实现折线散点图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue实现定义一个全局实例Vue.prototype
这篇文章主要介绍了vue实现定义一个全局实例Vue.prototype，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue如何动态配置ip与端口
这篇文章主要介绍了vue如何动态配置ip与端口，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue2.X 通过AJAX动态更新数据
这篇文章主要介绍了Vue2.X 通过AJAX动态更新数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07