1：什么是根节点
单文件组件中，template 模板的直接子元素就是根节点。
<template>
<div>我是根节点</div>
</template>
2：根节点的作用
父组件向子组件传值我们可以使用 props 接收，如：
<template>
<son-component name='tom'></son-component> // 向子组件传递一个值为 tom 的 name 属性。
<template>
props: ['name'] // 值为 'tom'
子组件根节点没有这些属性：
而当子组件没有使用 props 接收时：
<template>
<son-component class='son' name='tom'></son-component>
</template>
props:[] // 子组件没有接收
子组件的根节点元素就会继承这些属性：
并且可以在组件中通过 $attrs 来访问这两个属性：
created() {
console.log(this.$attrs);
}
得到没有被 props 接收的属性对象：（如果 name 属性被 props 接收，则剩下 class 属性）
v-model 和 自定义事件 如果没有接收，也会继承到根节点上，并且出现在 $attrs 中。
vue3 中新增 emits 属性来接收自定义事件。
3：需要注意的
3.1：取消继承
可以设置 inheritAttrs 属性值为 false 来取消根节点的继承
此时：根节点上不会有属性和自定义事件，但是 $attrs 和 props 不受影响
props: [],
inheritAttrs: false // 取消继承
3.2：特殊属性 key
如果绑定 key ，既不能用 props 接收，也不能继承，更不能通过 $attrs 访问：
<template>
<son-component key='one' /> // 只作为元素的惟一标识符，用于取消组件复用。
</template>
3.3：根节点的唯一性
vue2 中根节点只能有一个
vue3 中可以设置多个根节点，但是必须通过 v-bind=‘$attrs’ 声明继承的根节点
// vue2
<template>
<div></div>
</template>
// vue3
<template>
<div></div>
<div v-bind='$attrs'></div>
<div></div>
</template>
总结
1：父组件向子组件传递 非prop 和 非emits 时，子组件根节点会继承属性和方法，且可以通过 $attrs 访问
2：可以通过 inheritAttrs:false 取消根节点继承
3：vue2 只能有一个根节点，vue3 可以有多个
作者如果有不准确、错误的希望指出来
没有人希望传递不准确或错误的知识
