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

数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、根组件继承

默认情况下，当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上（直接自动继承）。

MyButton 组件模板

 click me

一个父组件使用了这个组件，并且传入了 class

最后渲染出的 DOM 结果是

# 一个根组件，添加的 class、style 直接作用于根元素上(直接继承) # 如果一个子组件的根元素已经有了 class、style，它会和从父组件上继承的值合并；event 同理，继承和根元素的事件都会执行。 click me

二、深层组件继承

有些情况下，一个组件（如：MyButton）会在根节点上渲染另一个组件（如：BaseButton）。此时 MyButton 接收的透传attribute会直接继续传给 BaseButton。如下 MyButton 组件：

三、模板中访问透传 attribute

3.1 禁用 Attributes 继承

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

 export default {  inheritAttrs: false  } " _ue_custom_node_="true">  // 部分逻辑 " _ue_custom_node_="true">

禁用 attribute 继承的场景：attribute 需要应用在根节点以外的其他元素上。

3.2 模板中访问透传 attribute

透传进来的 attribute 可以在模板表达式中直接用 $attrs 访问到。这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

透传属性: { { $attrs }}

MyButton组件模板

  click me

 exports default {  inheritAttrs:false  }  // 组合式 API 代码 " _ue_custom_node_="true">  click me

3.3 多根节点的 Attributes 继承

和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，Vue 不知道要将 attribute 透传到哪里，所以将会抛出一个运行时警告。

如下 BaseLayout 组件模板：

 ... ... ...

如果 $attrs 被显式绑定，则不会有警告：

.........

四、在 JavaScript 中访问透传 Attributes

如果需要，你可以在

需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。如果你需要响应性，可以使用 prop。或者你也可以使用 onUpdated() 使得在每次更新时结合最新的 attrs 执行副作用。