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.
如下


image.png

原因和解决

意思是自定义指令不能放到组件上,而是要放到自有的元素上,也就是这里用到的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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.说说对双向绑定的理解 1.1、双向绑定的原理是什么 我们都知道Vue是数据双向绑定的框架,双向绑定由三个重要部...
    GuessYe阅读 611评论 0 0
  • ->点击访问个人博客地址,相互交流学习<- Vue.js安装 查看版本 Vue.js 提供一个官方命令行工具,可用...
    JackHCC阅读 434评论 0 0
  • 前端常见的一些问题 1.前端性能优化手段? 1. 尽可能使用雪碧图2. 使用字体图标代替图片3. 对HTML,cs...
    十八人言阅读 1,235评论 0 1
  • vue面试题 一、vue优点 1.轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 2.简单...
    没糖_cristalle阅读 1,649评论 0 3
  • vue2的: 1.生命周期函数: 1.1 什么是生命周期函数 我理解的生命周期函数就是 vue 实例从创建到销毁的...
    tang温暖阅读 319评论 0 0

友情链接更多精彩内容