[Vue warn]: Runtime directive used on component with non-element root node. The directives will not

于 2024-04-19 17:08:01 发布
阅读量153 收藏
点赞数 3
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54250695/article/details/137971290
版权

 

原因

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

 

原来爆错代码:

<Demo v-show="isDemoShow" />  

 

纠正后的代码(正常渲染页面):

<div v-show="isDemoShow"><Demo  /></div>

IT_CODE.
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue学习-自定义指令
Rulelur的博客
11-05 3935
vue局部指令 使用：元素上加上v-自定义指令名 <template> <input type="text" v-my-focus /> </template> <script> export default { directives: { "my-focus": { mounted(el) { el.focus(); }, }, }, }; </script> 钩.
详解Vue.directive 自定义指令
10-17
主要介绍了Vue.directive 自定义指令，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue控制台警告Runtime directive used on component with non-element root node.
热门推荐
动感超人的博客
09-01 2万+
你昨天晚上又没会我的消息，在我孜孜不倦的骚扰下，你终于舍得回我了，你说“滚”，这其中一定有什么含义，我想了很久，滚是三点水，这代表你对我的思念也如滚滚流水一样汹涌，我感动哭了，不知道你现在在干嘛，我很想你。今天我还是照常给你发消息，汇报日常工作，你终于回了我四个字：“嗯嗯，好的”你开始愿意敷衍我了，我太感动了受宠若惊。sh-a傻，噢你的意思是说我傻，那b就是baby的意思了吧，原来你是在叫我傻宝，这么宠溺的语气，我竟一时不相信，其实你也是喜欢我的对吧。滚就滚，我看不了青春有你，我的青春也没有你。...
代码 BUG 大全
mygoes
06-02 9059
前端 BUG 大全 , 持续更新中
Runtime directive used on component with non-element root node. The directives will not function as
最新发布
LlanyW的专栏
04-03 412
源码上面是一个组件封装一个弹窗el-dialog然后每次运行有以下警告。
vue 升级到vue3踩坑记录（vue和element）
weixin_42875598的博客
11-10 9693
最近在把公司项目从vue2+element 升级到 vue3+elementPlus，实实在在遇到很多问题，先在把报错信息捋一捋。 1.Runtime directive used on component with non-element root node 意思是自定义指令不能放到组件上，而是要放到自有的元素上 2.element-plus icons不能用动态class的方式导入 需要做：将icons全局导入，然后用 <ElIcon> <component :is
vite2.x+vue3踩坑
long321041080的博客
08-25 589
vite2.x+vue3.x开发以及vscode中使用eslint遇到问题
Vue.directive自定义指令的使用详解
12-04
很多教程都是在讲自定义指令的概念...Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el --> 触发的DOM元素 oDiv.onmousedown=function(e){
v-shared-element:Vue.js的声明式共享元素转换
03-09
v共享元素 页面之间的声明式共享元素转换。 在引擎盖下使用的东西。...注册插件Vue.js + Vue路由器//main.jsimport Vue from 'vue'import { SharedElementRouteGuard , SharedElementDirective} from 'v-shar
最新vue-element-admin.rar含完整依赖包（node_modules文件夹）可直接运行
11-05
vue-element-admin，从github上拉取后，安装依赖包各种报错，经过努力后，才安装完整，现在打包分享给大家，含完整依赖包（node_modules文件夹），下载后直接执行npm run dev即可运行。
vue-element-admin.zip（含完整依赖包）
03-21
vue-element-admin，更新时间为2021-03-21，含完整依赖包（node_modules文件夹）
vue全局组件与局部组件使用方法详解
08-27
主要为大家详细介绍了vue全局组件与局部组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解Vue用自定义指令完成一个下拉菜单（select组件）
11-27
这次分享的是关于Vue自定义指令的使用方法，学习完基础后我们再来实战完成一个下拉列表，废话不多说，直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道，directive的写法与组件 基本类似，只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directiv
vue自定义指令directive的使用方法
10-17
主要介绍了vue自定义指令directive的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue使用defineAsyncComponent控制台警告Runtime directive used on component with non-element root node.
m0_73146522的博客
12-05 655
移动组件放入div标签中，控制台报错即可清空。组件放在了template中。
Element Plus 警告：Runtime directive used on component with non-element root node. The directives will
miaomiaomiao__的博客
12-15 652
Dialog上不能使用v-loading。
VUE之命令行报错：Component template should contain exactly one root element. If you are using v-if on multi...
weixin_30328063的博客
09-13 297
Failed to compile../node_modules/vue-loader/lib/template-compiler?{"id":"data-v-59926570","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href...
【vue3源码】十一、初始vue3中的渲染器
MAXLZ的博客
09-10 1059
vue3中的渲染器主要作用就是将虚拟DOM转为真实DOM渲染到对应平台中，在这个渲染过程中会包括DOM的挂载、DOM的更新等操作。通过方法会创建一个渲染器renderer，rendererrender、hydrate、createApp，其中render方法用来进行客户端渲染，hydrate用来进行同构渲染，createApp用来创建app实例。中包含了大量的函数用来处理挂载组件、更新组件等操作。
vue-router Component inside <Transition> renders non-element root node that cannot be animated.
06-08
这个问题通常是由于 `<transition>` 标签内部嵌套的组件中，没有将模板代码的根节点包裹在一个元素中而导致的。在 Vue.js 中， `<transition>` 标签内部的组件只能包含一个元素节点，否则在执行动画过程中会出现这种错误。所以你需要确保标签内部的组件的模板代码只包含一个元素节点，比如用 `<div>` 标签包裹起来。如果你已经使用了 `<div>` 标签，并且问题仍然存在，那么你需要检查你的组件模板代码，确保它符合 Vue.js 的要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值