Vue3报错Extraneous non-props attributes (xxx) were passed to component but could not be ...

今天在重构项目时遇到一个报错Extraneous non-props attributes (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.，趁有时间整理学习理解一下。

首先的话这不是什么特别严重的报错。赶时间的朋友可以直接滑到最下面看解决办法。

翻译

Extraneous non-props attributes (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

大致意思就是 ➡ 额外的非prop属性（xxx）已传递给组件，但由于你的组件渲染片段和文本根节点，无法自动继承。

报错场景

在解决问题之后，我也是写了个小Demo复原了一下报错场景。代码比较简单就直接贴图了。


这时候竟然奇迹般地没有报错，原因是在这种情况下触发了Vue3当中的透传Attributes
可当我把图 2 中的注释解开，让子组件模板中有多个根节点时，就会出现报错

很明显，当初是你无意操作，无意触发了Vue3透传Attributes机制才没有出现报错，可当你的子组件中有多个根节点时，Vue使用透传Attributes机制也没有办法确定要在哪一个根节点继承属性时，就报出了上诉警告。

透传Attributes

关于什么是透传Attributes，官方说得已经很清楚了就是不好找，阅读起来也不算难。文章中的蓝字链接都可以跳转。给个链接 ➡ 透传 Attributes

解决办法

1. 第一种情况，就是你有需要传输一个prop属性的数据给子组件，但是你在子组件中忘记用defineProps接收，无意中触发了透传 Attributes，在使用setup语法糖的情况下注意使用defineProps接收props属性数据。
2. 第二种情况，就是你不需要传输一个prop属性的数据给子组件，但是你在整理代码时，忘记将父组件的子组件标签中的:xxx="xxx"删除（笔者就是这种情况）。
3. 第三种情况，你确确实实需要传递一个非prop属性数据到子组件中，但子组件中存在多个根节点，你可以在该根节点使用v-bind="$attrs"进行显式绑定，就可以避免报错了。

文章有问题之处还望评论斧正！