透传 Attributes

仅记录自己的学习过程

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 1 天，点击查看活动详情

• “透传 attribute”指的是传递给一个组件，却没有被该组件声明/消费为 props或 emits的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

• 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上，还可以进行深层组件继承。如果该组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。v-on同样进行继承。

• 可以通过$attrs 这个实例属性来访问组件的所有透传 attribute。这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

• 可通过在组件选项中设置 inheritAttrs: false禁用 Attributes继承。 有几点需要注意：

  • 和 props 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。
  • 像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。

• 和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，将会抛出一个运行时警告。有一个根节点进行v-bind="$attrs"绑定就不会警告。