Vue3之透传 Attributes

透传的情况

1. 没有被该组件声明为 props 或者 emits 的attribute，例如class，id等
2. v-on绑定的监听器(事件)
   第1种透传情况(class，id等)：

click me
// 父组件使用

// 透传之后的效果：如果button上面已经有class，它们会进行合并
click me

第2种透传情况(v-on监听器)

// 父组件使用

// MyButton.vue
// 默认@click="onClick"会添加到根元素上，就是案例中的button
click me
// 如果根节点上有定义的事件事件监听器，那么会触发clickMyself和onClick两个事件
click me

禁用 Attributes 继承

有时候我们不想组件的属性透传到组件的根节点上，而是根节点里面的子节点，可以在组件选项中设置 inheritAttrs: false。在vue 3.3开始你也可以直接在

多根节点的 Attributes 继承

在vue3中，编写组件不是一定需要一个根节点，所以组件中可以有多个根节点，如果$attrs没有被显式绑定，将会抛出一个运行时警告。

// 父组件使用


// CustomLayout.vue
...
// 如果没有显式绑定$attrs,会抛出一个警告
...
...

在 JavaScript 中访问透传 Attributes