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复杂表格单元格合并根据数据动态合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
看过很多人讲vue的生命周期，但总是被绕的云里雾里，尤其是自学的同学，可能js的基础也不是太牢固，听起来更是吃力，那我就已个人之浅见，以大白话的方式给大家梳理一下，如有不准确的地方，欢迎指正！2020-12-12
这篇文章主要介绍了vue3+TS reactive设定类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue-cli assets SubDirectory及PublicPath区别详解
这篇文章主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于vue中elementUI里面一些插件的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
uniapp APP中内嵌webview的H5与APP相互通讯动态传参代码示例
最近外部公司的app要接入我司的uni H5项目,所以这篇文章主要给大家介绍了关于uniapp APP中内嵌webview的H5与APP相互通讯动态传参的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了路由vue-route的使用,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
本文通过实例代码给大家介绍了vue 中swiper的使用，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
vue的style绑定background-image的方式和其他变量数据的区别详解
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue3+TS项目中eslint、prettier安装配置详细指南
为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下2024-07-07
最新评论