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

于 2025-06-06 14:40:15 发布
阅读量202 收藏
点赞数 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 3655
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 803
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
vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be
weixin_50559423的博客
08-19 5320
今天在重构项目时遇到一个报错，趁有时间整理学习理解一下。首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。
Vue 3传递数组警告：Extraneous non-props attributes were passed to component but could not be automatically
qq_29715355的博客
04-28 1839
在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 warn]: Extraneous non-props attributes (fileList) were passed to component but……
weixin_44384273的博客
01-17 2321
1.第一种情况，就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。2.第二种情况，就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx="xxx"删除。一般是上面三种情况之一，我这边排查后是第二种情况，父组件将 fileList 传给了子组件，子组件没有使用，导致这个预警。
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报错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 2257
子组件中存在多个根节点，在对应的根节点使用v-bind=”$attrs"进行显式绑定。父组件传递了props参数，子组件没有接收，并且子组件不止一个根节点。将子组件包裹在一个根节点下。
解决 Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-08 2404
在使用 Vue 3 中的 组件时，尝试传递非 props 属性（如 mode）可能导致组件报错。本文将探讨出现这个问题的原因，并提供了多种解决方案，包括移除不必要的属性、全局配置、使用 组件等。同时介绍了 Vue 3 过渡系统的改变以及避免类似问题的建议，旨在帮助开发者更好地使用 Vue 3 的过渡功能。
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.
vue3项目中使用element-plus组件出现警告信息：Runtime directive used on component with non-element root node.
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
11-17 1666
出现上面警告信息的原因是：我使用了el-skeleton自定义了一个skeleton-text组件，然后将这个组件使用到了el-tooltip组件里面，就导致这个报错了。警告提示信息是说，缺少了root根元素，那么我们就可以自己使用div当做根元素，这样就可以解决这个警告问题了。到此，xxx问题就解决啦。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值