[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automa

最新推荐文章于 2024-09-19 10:36:37 发布
最新推荐文章于 2024-09-19 10:36:37 发布
阅读量547 收藏
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45960031/article/details/141593916
版权

问题

在这里插入图片描述

问题代码

子组件
在这里插入图片描述
父组件使用
在这里插入图片描述

原因

因为子组件正在渲染多个

使用 v-if/v-for的元素。这意味着没有 单一的根 元素。
这里将 class 传递给组件 <sidebar-item class=“nest-menu” … class 只能放置在 HTML 元素上。如果将它放在 Vue 组件上，Vue 会尝试将它放在组件正在呈现的内容的根元素上。但是因为你的组件渲染的内容没有根元素，Vue 不知道放在哪里…

要删除警告，请删除 class=“nest-menu” 或将 sidebar-item整个子组件的内容包装到单个div中（如下图）。

在这里插入图片描述

小羊aa
关注
vue3 - Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
高级前端工程师
01-11 2941
vue3，报错，浏览器控制台报错，vue3报Extraneous non-props attributes (ref_key) were passed错误，vue3 element-plus plus:Extraneous non-props attributes (ref_key) were passed to component，vue3如何解决报错，vue3报错怎么办，如何处理vue3控制台报错，vue3报错怎么解决，详细解决教程，【vue警告】[Vue warn]，vue3+element plus
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
宁波阿成的博客
04-15 658
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
【vue警告】[Vue warn]: Extraneous non-props attributes (class) were passed to component but could
周金鱼啊
11-23 9686
[Vue warn]: Extraneous non-emits event listeners (refreshRelationList) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event liste
el-form中嵌套表格这是对于表单中校验prop时报runtime.esm.js:1897 Error: please transfer a valid prop path to form item
最新发布
qq_27585917的博客
09-19 224
该代码中 :prop的值填写的是对应必填校验字段的路径，即该字段在对象中的对应层级，数据的第一级是从有循环的第一个属性(questionList)开始 ,第二级对应的变量是（interestMenList），最后一个变量的动态的表格书写 tableItem.prop;:rules="[{required: true, message: $t('请输入'), trigger: 'blur'}]">
vue控制台报错Extraneous non-props attributes (class) were passed to component but could not be automatica
热门推荐
Ama_Lee的博客
04-03 6万+
完整报错信息 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 报错翻译 无关的非道具属性(类)被传递给组件，但不能被自动继承，因为组件呈现片段或文本根节点。 存在的问题 根据报错信息 首先检查是否传递了没有解析的属性，可以检查一下你用的第
解决Extraneous non-props attributes (border, class) were passed to component but could not be
weixin_43934104的博客
08-30 9382
建议去element-plus官网文档查看自己的属性是哪里不对https://element-plus.gitee.io/zh-CN/component/dialog.html看图，我的组件里面写的这个el-dialog就有两个地方不对，跟官方的属性对不上就改成官方的，class也不能用了，得按照官方文档去设置属性。...
Extraneous non-props attributes (XXX) were passed to component but could not be automatically
qq_26905813的博客
11-01 1万+
就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。你确确实实需要传递一个非prop属性数据到子组件中，但子组件中存在多个根节点，你可以在该根节点使用v-bind=”$attrs"进行显式绑定，就可以避免报错了。就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx=“xxx"删除。
【vue】[Vue warn]: Extraneous non-props attributes (class) were passed to component but could
J_Giving的博客
09-28 1万+
检查封装的vue组件或者使用的第三方组件，是否将组件暴露在了最外层，如果暴露在最外层，则在引用的时候就是报该错
vue3 组件naiveui报错： Extraneous non-props attributes (class) were passed to component but could not be
什么意思哦
12-13 2627
vue3 组件naiveui报错 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
【uniapp】[Vue warn]: Invalid component name: “.-pages-Myblock-uni_myMessage“. Component names should
weixin_48596030的博客
12-10 2658
uniapp页面报错[Vue warn]: Invalid component name: ".-pages-Myblock-uni_myMessage". Component names should conform to valid custom element name in html5 specification.
[Vue warn]: Unknown custom element: ＜sales-view＞ - did you register the component correctly? For rec
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-24 2739
错误信息： log.js?1afd:24 [HMR] Waiting for update signal from WDS... vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <top-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
vue 报错 ：[Vue warn]: Do not use built-in or reserved HTML elements as comp
且听风吟的博客
11-26 5420
引入组件后出现了如下报错： 是因为组件的命名和html标签重复导致警告，如下： 解决方案是给 name 换个名字就可以啦，如下： 所以，创建组件的时候要注意组件命名与html标签区分开。 由于模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。 主要有三种情况： 一是完全不合法的标签名，例如 </> ； 二是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常
Vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be ...
DM_Cxx的博客
06-09 2万+
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
Vue3报错：Extraneous non-props attributes (style) were passed to component but could not be automatical
海风依旧
11-30 1万+
Vue3报错：Extraneous non-props attributes (style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
[Vue warn]: Extraneous non-props attributes (style) were passed to component but could not be 警告
choose_Mings的博客
04-29 2854
使用vue3的时候莫名出现了这个警告，但是不影响使用，原因是template标签下的代码还需要一层标签包裹。 问题代码： <template> <div class="">任务管理</div> <div class="">任务管理</div> <div class="">任务管理</div> </template> 解决： <template> <div clas..
[Vue warn]: Extraneous non-props attributes (class)
qq_43592064的博客
11-21 2万+
[Vue warn]: Extraneous non-props attributes (class)
vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be
weixin_50559423的博客
08-19 610
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
警告：Extraneous non-props attributes (data) were passed to component but could not be automatica
goodnight2333333的博客
05-24 1104
这个警告一般是因为在Vue组件中，给组件传递了没有在组件props中声明的属性。这可能会导致意外行为，因为这些属性并不会被组件自动接收。只需要在子组件中定义并接受父组件传来的参数，即可解决警告~
[vue3.x]实战问题--Extraneous non-props attributes
m0_54850952的博客
03-09 2346
Vue3.x 开发问题 开发环境 问题描述 问题解析 开发环境 "vue-i18n": "^9.1.6", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" 问题描述 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment
vue3 element-ui plus:Extraneous non-props attributes (ref_key) were passed to component ....
08-08
当你看到 Vue3 中 Element-UI Plus 的提示 "Extraneous non-props attributes (ref_key) were passed to component"，这意味着你在组件上传递了一些不属于该组件 prop（属性）的额外属性，比如 `ref_key`。在 Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值