前言

在我们使用一个组件的时候，并在上面添加相应的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事件，当其根元素被点击的时候，该事件会和父组件绑定的事件一起触发。