今天在重构项目时遇到一个报错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
解决办法
- 第一种情况,就是你有需要传输一个prop属性的数据给子组件,但是你在子组件中忘记用
defineProps
接收,无意中触发了透传 Attributes,在使用setup语法糖的情况下注意使用defineProps
接收props属性数据。 - 第二种情况,就是你不需要传输一个prop属性的数据给子组件,但是你在整理代码时,忘记将父组件的子组件标签中的
:xxx="xxx"
删除(笔者就是这种情况)。 - 第三种情况,你确确实实需要传递一个非prop属性数据到子组件中,但子组件中存在多个根节点,你可以在该根节点使用
v-bind="$attrs"
进行显式绑定,就可以避免报错了。
文章有问题之处还望评论斧正!