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

Vue3多根节点致组件不渲染问题及解决
最新推荐文章于 2025-09-28 11:39:50 发布
原创 最新推荐文章于 2025-09-28 11:39:50 发布 · 331 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

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

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

解决方案:

  确保子组件是单个根节点

Libei丫
关注
vue3 - Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
高级前端工程师
01-11 3806
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 属性传递问题
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-08 2558
在使用 Vue 3 中的 组件时，尝试传递非 props 属性（如 mode）可能导致组件报错。本文将探讨出现这个问题的原因，并提供了多种解决方案，包括移除不必要的属性、全局配置、使用 组件等。同时介绍了 Vue 3 过渡系统的改变以及避免类似问题的建议，旨在帮助开发者更好地使用 Vue 3 的过渡功能。
vue警告：Extraneous non-props attributes (class) were passed to component
m0_65292523的博客
09-28 322
Vue组件中出现"Extraneous non-props attributes"警告是因为组件模板缺少单一根元素，导致无法自动继承外部传递的属性。在Message.vue组件中，模板最初包含多个同级div元素，没有最外层包裹。解决方法是添加一个外层div作为根节点，这样Vue就能正确绑定外部传递的属性（如class）。修改后警告消失，符合Vue要求组件必须有一个根元素的规则。
vue3 Extraneous non-props attributes (modelValue) were passed to component but could not be automati
Missying55的博客
11-07 8912
vue3 Extraneous non-props attributes (modelValue) were passed to component but could not be automati
vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be
weixin_50559423的博客
08-19 6373
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
Vue 3传递数组警告：Extraneous non-props attributes were passed to component but could not be automatically
qq_29715355的博客
04-28 3425
在Vue 3开发中，当我们向组件传递属性时，可能会遇到警告。这个警告表明传递给组件的非props属性无法自动继承，因为组件渲染的是片段或文本根节点。此问题通常在组件没有单一根元素时出现，了解如何解决该警告对于保证项目代码的健壮性和可读性非常重要。
【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`, `...
select.vue:372 Extraneous non-props attributes (modelValue) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes
最新发布
11-13
在Vue中，当出现 'Extraneous non - props attributes (modelValue) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes' ...
Extraneous non-props attributes (node-componentName) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.
09-16
在 Vue.js 中，当出现警告 **"Extraneous non-props attributes (node-componentName) were passed to component but could not be automatically inherited because component renders fragment or text or ...
vue3问题警告解决：传递给组件的某些非 props 属性（例如 class、id 等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点
weixin_48420104的博客
03-06 3969
一些开发工具（如 Vue Devtools）可能会使用组件的名称来提供更好的调试支持。：Vue 3 允许组件返回多个根节点（即片段），但片段无法自动继承父组件传递的非。等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点。：如果你的组件需要递归调用自身，Vue 需要知道组件的名称。如果可能，确保组件的模板只有一个根节点。中不是必需的，但它可以帮助你更好地组织代码，尤其是在大型项目中。在 Vue 3 中，当组件的模板有多个根节点（例如使用了。如果可能，确保组件的模板只有一个根节点。
[Vue warn]: Extraneous non-props attributes (fileList) were passed to component but……
weixin_44384273的博客
01-17 2528
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 2524
子组件中存在多个根节点，在对应的根节点使用v-bind=”$attrs"进行显式绑定。父组件传递了props参数，子组件没有接收，并且子组件不止一个根节点。将子组件包裹在一个根节点下。
[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automa
weixin_45960031的博客
08-27 1762
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.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值