attribute 透传

“透传 attribute”的意思是把attribute透漏给一个组件，或者把 v-on 事件监听器传递一个组件。但在所接收组件上，并没有显式地声明的props或emits来接收。最常见的例子就是class、style和id attribute。

Attribute 继承

当一个组件以单个元素为根作渲染时，透传的 attribute 会自动添加到根元素的 attribute 中。

举个例子，下面这个组件有这样的模板：

click me

一个父组件使用了这个组件：

最后渲染出的 DOM 结果是：

click me

对 class 和 style 的合并

如果一个子组件的根元素已经有了class或style attribute，它会和从父组件上继承的值合并。

将之前的组件的模板改成这样：

click me

最后渲染出的 DOM 结果是：

click me

v-on 监听器继承

同样的规则也适用于v-on事件监听器：

监听器 click 会被添加到的根元素，即那个原生的元素之上。当原生的被点击，会触发父组件的onClick方法。如果原生button元素已经通过v-on绑定了一个事件监听器，则这些监听器都会被触发。

深层组件继承

如果一个组件在根节点上渲染另一个组件，例如，我们重构一下，让它在根节点上渲染：

此时接收的透传 attribute 会直接传向。

请注意：

• 直传的 attribute 不会包含上声明过的props或是针对emits声明事件的 v-on 侦听函数，换句话说，声明过的props和侦听函数被“消费”了。
• 直传的 attribute 若符合声明，也可以作为props传入。

禁用 Attribute 继承

如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置inheritAttrs:false。

如果你使用了

最常见的需要禁用 attribute 继承的场景，就是 attribute 需要应用在根节点以外的其他元素上。通过设置inheritAttrs:false，你可以完全控制透传进来的 attribute 如何应用。

这些透传进来的 attribute，可以在模板的表达式中，直接用$attrs访问到。

Fallthrough attribute: {{ $attrs }}

这个$attrs对象包含了除组件的props和emits属性外的所有其他 attribute，例如class，style，v-on监听器等等。

 click me

 click me

...
...
...

...
...
...

export default {
  setup(props, ctx) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(ctx.attrs)
  }
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com