Vue 组件属性透传 (Attribute Inheritance)：$attrs 的深度应用-Vue.js-PHP中文网

$attrs 是 Vue 3 组件属性透传的核心机制，自动收集未声明的属性与事件监听器并响应式透传；单根组件默认继承，多根或需定向透传时须设 inheritAttrs: false 并 v-bind="$attrs"；需配合 useAttrs()、computed 控制优先级及插槽、defineExpose 构建完整封装链。

vue 组件属性透传 (attribute inheritance)：$attrs 的深度应用

$attrs 是 Vue 3 中实现组件属性透传的核心机制，它自动收集父组件传入、但未被 defineProps 显式声明的所有属性与事件监听器（如 class、style 除外），并支持响应式透传到目标元素或子组件。它不是“可选技巧”，而是封装高复用、低侵入 UI 组件的基础设施。

单根组件的默认继承行为

当子组件只有一个根元素，且未设置 inheritAttrs: false 时，Vue 会自动将未声明的属性（如 id、data-test、@click）挂载到该根元素上：

父组件写：
若 MyInput.vue 根节点是，且未声明 size 和 change，则最终渲染为：
class 和 style 会被智能合并——父传的 class 不覆盖子组件模板中已有的 class，而是并入

多根/非根元素透传：必须显式绑定

当组件使用多个根节点（fragments）、根是容器标签（如

），或需把属性透传给内部深层元素（如封装了  的表单控件）时，必须关闭默认继承并手动绑定：
在 <script setup></script> 中调用：defineOptions({ inheritAttrs: false })

  在模板中明确指定接收位置： 或 

  注意：驼峰命名事件（如 @update:modelValue）在 $attrs 中以 onUpdate:modelValue 形式存在，v-bind="$attrs" 可原生支持 v-model 透传

安全透传：避免属性覆盖与优先级失控
直接 v-bind="$attrs" 简单，但可能覆盖组件内部设定的固定值。例如父组件传 size="small"，而组件逻辑默认应为 "medium"，此时需控制优先级：

											
												
												
													Vue工具箱(免费版)
													规避 Vue 3 常见陷阱：响应式、ref 与 reactive、computed 时机与组合式 API 优选实践。
												
												下载
												
											
										

使用 useAttrs() 获取响应式 $attrs 对象
  通过 computed 合并本地逻辑与透传值：size: attrs.size ?? 'medium'

  对第三方组件封装尤其关键：避免父组件意外覆盖关键 props（如 disabled、modelValue）

与插槽、exposed 协同构建完整封装链
$attrs 解决“输入”透传，还需配合其他机制形成闭环：

插槽内容由 $slots 透传，与 $attrs 并行使用，实现结构+行为双透传
  若需暴露子组件方法（如 focus()、validate()），需用 defineExpose 主动导出，不能依赖 $attrs

  组合式 API 中，$attrs 不再通过 this.$attrs 访问，统一使用 useAttrs()（Vue 3.3+ 推荐）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！