vue3报错 Extraneous non-props attributes were passed to component but could not be 导致组件不渲染

于 2025-06-06 14:40:15 发布
阅读量206 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Libei123321/article/details/148474637

在vue3中是可以写多个根标签的，但是有一种情况会出现多个根节点导致组件不渲染的情况

多个根节点会导致vue无法自动继承非props属性 ，他不知道该把属性给哪个组件，所以会导致组件或页面不渲染的情况

解决方案:

  确保子组件是单个根节点

Libei丫
关注
vue3 - Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
高级前端工程师
01-11 3661
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 805
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
vue3 Extraneous non-props attributes (modelValue) were passed to component but could not be automati
Missying55的博客
11-07 8860
vue3 Extraneous non-props attributes (modelValue) were passed to component but could not be automati
Vue 3传递数组警告：Extraneous non-props attributes were passed to component but could not be automatically
qq_29715355的博客
04-28 1895
在Vue 3开发中，当我们向组件传递属性时，可能会遇到警告。这个警告表明传递给组件的非props属性无法自动继承，因为组件渲染的是片段或文本根节点。此问题通常在组件没有单一根元素时出现，了解如何解决该警告对于保证项目代码的健壮性和可读性非常重要。
解决 Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-08 2407
在使用 Vue 3 中的 组件时，尝试传递非 props 属性（如 mode）可能导致组件报错。本文将探讨出现这个问题的原因，并提供了多种解决方案，包括移除不必要的属性、全局配置、使用 组件等。同时介绍了 Vue 3 过渡系统的改变以及避免类似问题的建议，旨在帮助开发者更好地使用 Vue 3 的过渡功能。
vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be
weixin_50559423的博客
08-19 5373
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
【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 (id, name) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
最新发布
06-10
让我们系统地解决"Extraneous non-props attributes (id, name)"报错问题： ### 问题分析 当Vue组件渲染**片段根节点（多个根元素）或文本根节点**时，无法自动继承父组件传递的非props属性（如`id`, `name`, `...
vue3问题警告解决：传递给组件的某些非 props 属性（例如 class、id 等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点
weixin_48420104的博客
03-06 2795
一些开发工具（如 Vue Devtools）可能会使用组件的名称来提供更好的调试支持。：Vue 3 允许组件返回多个根节点（即片段），但片段无法自动继承父组件传递的非。等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点。：如果你的组件需要递归调用自身，Vue 需要知道组件的名称。如果可能，确保组件的模板只有一个根节点。中不是必需的，但它可以帮助你更好地组织代码，尤其是在大型项目中。在 Vue 3 中，当组件的模板有多个根节点（例如使用了。如果可能，确保组件的模板只有一个根节点。
[Vue warn]: Extraneous non-props attributes (fileList) were passed to component but……
weixin_44384273的博客
01-17 2323
1.第一种情况，就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。2.第二种情况，就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx="xxx"删除。一般是上面三种情况之一，我这边排查后是第二种情况，父组件将 fileList 传给了子组件，子组件没有使用，导致这个预警。
Vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be ...
DM_Cxx的博客
06-09 3万+
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
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控制台报错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. 报错翻译 无关的非道具属性(类)被传递给组件，但不能被自动继承，因为组件呈现片段或文本根节点。 存在的问题 根据报错信息 首先检查是否传递了没有解析的属性，可以检查一下你用的第
报错：Extraneous non-props attributes (id) were passed to component but could not be automatically inhe
歌舞阿瓜的博客
09-24 2271
子组件中存在多个根节点，在对应的根节点使用v-bind=”$attrs"进行显式绑定。父组件传递了props参数，子组件没有接收，并且子组件不止一个根节点。将子组件包裹在一个根节点下。
[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automa
weixin_45960031的博客
08-27 1521
Extraneous non-props attributes (class) were passed to component but could not be automatically inh
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.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值