$attrs 是 Vue 3 中自动收集未声明 props 的父级传入属性的响应式对象，支持透传至根元素或手动绑定的目标元素，配合 inheritAttrs: false 可精准控制透传目标，并天然支持 v-model 拆解后的双向绑定与事件透传。

$attrs 是 Vue 3（也兼容 Vue 2.4+）中一个非常实用的响应式对象，它自动收集父组件传给当前组件的、**未被 props 显式声明**的所有属性（包括普通 HTML 属性、事件监听器、自定义属性等），且默认会继承到组件根元素上。利用它，可以轻松实现「属性透传」，避免多层嵌套时手动逐层解构、再传递的繁琐操作。

什么是属性透传？为什么需要它？

当组件 A → B → C → D 多层嵌套时，A 要把某个配置项（比如 size、disabled 或自定义事件 @change）传给最内层 D，传统做法是 B 和 C 都得在 props 中声明、再通过 v-bind 传下去——代码冗余、易出错、维护成本高。
属性透传就是让中间层（B、C）「透明中转」：不关心这些属性具体是什么，只负责原样往下传。$attrs 正是为此而生。

基础用法：自动继承 + 手动透传

默认情况下，如果子组件没有根元素，或根元素不是单个标签（如用了多个根节点、或用了 ），$attrs 不会自动挂载。这时需显式使用 v-bind="$attrs"：

• 在子组件模板中，把 v-bind="$attrs" 写在目标元素上（通常是表单控件、按钮等最终承载属性的 DOM 元素）
• 若子组件有多个根节点，必须手动绑定，否则 Vue 无法决定挂到哪个节点
• 注意：v-on 指令（如 @click）也会进入 $attrs，所以 v-bind="$attrs" 同时透传事件和属性

配合 defineOptions({ inheritAttrs: false }) 精确控制

有时你不希望 $attrs 自动挂到根元素（比如根是

，但想把 class/style 透传给内部的 ）。这时可关闭默认继承：

• 在 setup 组件中使用 defineOptions({ inheritAttrs: false })
• 然后在模板里，把 v-bind="$attrs" 显式加在真正需要接收透传属性的子元素上
• 这样既避免污染根节点，又能精准控制透传目标

与 v-model 和事件透传配合更自然

$attrs 天然包含 v-model 拆解后的 modelValue 和 @update:modelValue，因此无需额外处理即可透传双向绑定：

• 父组件写：
• MyInput 组件内只需 ，input 就自动获得 value、@input（对应 modelValue）、@change、size 等
• 如果 MyInput 内部是封装的 或 ，透传后行为完全一致