前言

在我们使用一个组件的时候，并在上面添加相应的 class 样式的时候，你会发现，他会进行一个透传，作用于子组件的内容元素，当然，也包括一些点击事件等等，而这就是 Attributes 继承。而他会怎么继承呢？以何种规则继承呢？下面我们来具体看一看。

Attributes 继承

当我们的一个组件以单个元素为根进行渲染时，使用该组件并在上声明的 props、emits 属性以外的元素，进行透传。该组件的根元素会对透传的元素进行继承。例如：class、style 以及 id 等等。

举个例子，比如我们有一个 Title 组件：

// Title.vue<span>title</span>

在父组件中使用 Title 组件，并对其传入一个 class：

<Title class="gray" />

最后，子组件会被渲染成如下这样：

<span class="gray">title</span>

你会发现，我们并没有声明一个 class 的 prop，他会自动把 calss 透传给子组件，而子组件的根元素会进行相应的继承。

这个时候，你可能会想到，如果我们子组件的根元素，已经声明了 class 了，他还会继承吗？或者说会覆盖掉？

class 合并

当子组件的根元素已有 class 的时候，他会把父组件透传下来的 class 进行一个合并。就像如下这样：

修改 Title 组件：

// Title.vue<span class="bold">title</span>

然后观看进行透传的组件渲染的样子：

// Title.vue<span class="bold gray">title</span>

对于 style 属性，也会用和 class 一样的方式进行合并。

还有一点要强调的是，对于 v-on 声明的事件监听器也会进行透传合并。

v-on 事件监听器的继承与合并

<Title @click="handle" />

如上，声明的 click 会被透传到 Title 组件的根元素上，而当其组件的根元素被点击时，也会触发父组件的 onClick 方法。

而如果，子组件的根元素本身也绑定了一个 v-on 事件，当其根元素被点击的时候，该事件会和父组件绑定的事件一起触发。