問題分析 1

报错翻译
无关的非道具属性(类)被传递给组件，但不能被自动继承，因为组件呈现片段或文本根节点。

存在的问题
根据报错信息
首先检查是否传递了没有解析的属性，可以检查一下你用的第三方的组件，或者自己编写的组件，是否 存在没有解析的属性，例如：class等属性

其次，还有一个重要原因是组件呈现片段或文本根节点，即组件暴露在了最外层。也就是vue内置或封装的组件、使用的第三方组件是否直接放在了template下。外面套一层div即可解决。

問題分析 2

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

当你的子组件中有多个根节点时，Vue使用透传Attributes机制也没有办法确定要在哪一个根节点继承属性时，就报出了上诉警告。

透传Attributes

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

解决办法

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

問題分析 3 （官方文档）

多根节点的 Attributes 继承

和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，将会抛出一个运行时警告。

1
2

<CustomLayout id="custom-layout" @click="changeValue"/>

如果 有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。

1
2
3
4

<header>...</header>
<main>...</main>
<footer>...</footer>

如果 $attrs 被显式绑定，则不会有警告：

1
2
3
4

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>