三分钟认识Vue根节点

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 中。

vue2 中自定义事件不会继承在根节点上，也不会出现在 $attrs 中

而 Vue3 中没有使用 emits 接收自定义事件时，根节点会继承自定义事件如：click 等，并且会出现在 $attrs 中。可以通过 $attrs.on + 首字母大写函数名 访问，如： $attrs.onClick()（修正）

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 可以有多个

作者如果有不准确、错误的希望指出来

没有人希望传递不准确或错误的知识