vue3 - Extraneous non-props attributes (ref_key) were passed to component but could not be automatic

已于 2025-01-15 17:19:25 修改
阅读量3.6k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) Vue组件与功能(工作经验) 文章标签： vue3.js 报错怎么办 如何解决浏览器控制台报错 vue3报Extraneous non-props attri vue3报错：ref_key were passed
于 2024-01-11 20:49:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135538500
在Vue3项目中遇到浏览器控制台警告，提示`Extraneous non-props attributes (ref_key)`无法自动继承。问题通常由组件库版本与Vue版本不匹配引起。解决方法是确保Vue版本与组件库兼容，通过更新或重新安装Vue来修复此问题。若问题依旧，考虑调整Vue3或组件库的版本。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

描述

在vue3项目中，浏览器控制台警告报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

很多教程无法解决该问题，本文可以完美解决。

解决

其实，

了解本专栏 订阅专栏 解锁全文
vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be
weixin_50559423的博客
08-19 5613
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
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"删除。
Vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be ...
DM_Cxx的博客
06-09 3万+
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
vue3 element-ui plus:Extraneous non-props attributes (ref_key) were passed to component ....
u014678583的博客
06-28 3275
警告：Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes....
Vue 3传递数组警告：Extraneous non-props attributes were passed to component but could not be automatically
qq_29715355的博客
04-28 2184
在Vue 3开发中，当我们向组件传递属性时，可能会遇到警告。这个警告表明传递给组件的非props属性无法自动继承，因为组件渲染的是片段或文本根节点。此问题通常在组件没有单一根元素时出现，了解如何解决该警告对于保证项目代码的健壮性和可读性非常重要。
警告：Extraneous non-props attributes (data) were passed to component but could not be automatica
goodnight2333333的博客
05-24 2059
这个警告一般是因为在Vue组件中，给组件传递了没有在组件props中声明的属性。这可能会导致意外行为，因为这些属性并不会被组件自动接收。只需要在子组件中定义并接受父组件传来的参数，即可解决警告~
[Vue warn]: Extraneous non-props attributes (room_no) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
最新发布
05-10
当遇到 `[Vue warn]: Extraneous non-props attributes (room_no) were passed to component but could not be automatically inherited` 的警告时，这通常是因为组件渲染的是片段（fragment）或文本根节点而不是...
Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.
05-06
[Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes. ``` 这表明当前...
Vue3报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
海风依旧
03-04 1331
Vue3报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
Extraneous non-props attributes (ref_key) were passed to component but could not be automatically
weixin_43423103的博客
06-14 3579
今天遇到这个警告，排查了半天发现是vue版本和element plus版本不兼容导致的，我的vue版本是3.2.6，element plus 的版本是2.2.5警告的意思是 ref_key 这个属性不能被继承，网上有很多相关的报错，多数的解释是组件有多个根结点，需要将组件在template中用div包裹，尝试之后不能解决一番尝试之后怀疑是版本问题，于是去element plus 官网用Element Plus Playground 调试。Element Plus Playground可以切换vue 的版本和
traneous non-props attributes (ref_key) were passed to component but could not be automatically inhe
蜗牛~~
05-11 349
你可以选择重新安装vue3，或降低element-ui版本，建议是升级vue3版本。一般是vue版本和element-plus版本不兼容导致的。vue3中使用element-plus时报错。然后重启项目就好了。
vue3报Extraneous non-props attributes (ref_key) were passed错误？
水车
03-15 480
vue3项目更新了element-plus版本后，项目开始疯狂报警告： Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes 原...
vue3问题警告解决：传递给组件的某些非 props 属性（例如 class、id 等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点
weixin_48420104的博客
03-06 2976
一些开发工具（如 Vue Devtools）可能会使用组件的名称来提供更好的调试支持。：Vue 3 允许组件返回多个根节点（即片段），但片段无法自动继承父组件传递的非。等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点。：如果你的组件需要递归调用自身，Vue 需要知道组件的名称。如果可能，确保组件的模板只有一个根节点。中不是必需的，但它可以帮助你更好地组织代码，尤其是在大型项目中。在 Vue 3 中，当组件的模板有多个根节点（例如使用了。如果可能，确保组件的模板只有一个根节点。
【vue警告】[Vue warn]: Extraneous non-props attributes (class) were passed to component but could
周金鱼啊
11-23 1万+
[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
vue控制台报错Extraneous non-props attributes (class) were passed to component but could not be automatica
热门推荐
Ama_Lee的博客
04-03 7万+
完整报错信息 Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 报错翻译 无关的非道具属性(类)被传递给组件，但不能被自动继承，因为组件呈现片段或文本根节点。 存在的问题 根据报错信息 首先检查是否传递了没有解析的属性，可以检查一下你用的第
[Vue warn]: Extraneous non-props attributes (fileList) were passed to component but……
weixin_44384273的博客
01-17 2340
1.第一种情况，就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。2.第二种情况，就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx="xxx"删除。一般是上面三种情况之一，我这边排查后是第二种情况，父组件将 fileList 传给了子组件，子组件没有使用，导致这个预警。
[vue3.x]实战问题--Extraneous non-props attributes
m0_54850952的博客
03-09 2416
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
【难得偷闲动动笔】开发问题记录（二）：Extraneous non-props attributes
qweasdzxcertdfgcvb的博客
02-09 5791
1.今天在用vue3时，遇到了一个警告： Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 问题的原因是因为传递了没有解析定义的属性，一般情况下是class。 经过检查果然是class没有定义 收工 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值