三分钟认识Vue根节点

文章目录 1：什么是根节点2：根节点的作用3：需要注意的3.1：取消继承3.2：特殊属性 key3.3：根节点的唯一性 总结

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

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

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