$attrs适用于组件仅作中转、不消费属性而需透传至子组件的场景；通过defineOptions({ inheritAttrs: false })关闭默认继承，并在目标元素上使用v-bind="$attrs"即可实现原样透传，支持事件与v-model自动拆解。

直接用 $attrs 配合 v-bind="$attrs"，再根据需要关掉默认继承，就能让中间组件不写 props、不手动解构，把父级传来的未声明属性原样透传下去。

什么时候该用 $attrs？

当一个组件只是“中转站”，不消费某个属性（比如 data-test、size、theme），但又要把它传给内部子组件时，就适合用 $attrs。

• 父组件传了 @change、disabled、class，但子组件自己不用，只负责交给内部的
• 封装第三方组件（如 ）时，想支持所有原生属性，又不想一一声明 props
• 多层嵌套 A → B → C → D，A 要把 id 和 @focus 传到最内层 D，B 和 C 不关心具体值

基础用法：自动继承 + 手动绑定

默认情况下，未在 defineProps 中声明的属性会自动加到组件的根元素上。如果根元素就是你要承载这些属性的目标（比如组件模板只有一个 ），那什么都不用做。

但如果根元素是容器类标签（如

），而你想把属性透传给内部的 或 ，就得手动绑定：

• 在 <script setup></script> 中加 defineOptions({ inheritAttrs: false })
• 在模板里，把 v-bind="$attrs" 写在真正要接收属性的那个元素上，例如：
• 注意：事件监听器（如 @click）也会进 $attrs，所以 v-bind="$attrs" 同时透传属性和事件

配合 v-model 更省事

$attrs 天然包含 v-model 拆解后的 modelValue 和 @update:modelValue，不需要额外处理就能透传双向绑定。

• 父组件写：
• MyInput 组件内只需在 上绑定，value、@input、@change 全部自动生效
• 即使内部用的是 或自定义控件，行为也和原生一致

多根节点或复杂结构要注意

如果组件有多个根节点（比如同时有 和 ），Vue 不会自动决定把 $attrs 挂到哪个节点上，必须显式绑定。

• 不绑定会报运行时警告
• 可以只给某个节点绑定：，其他节点保持干净
• 访问带短横线的属性要用方括号，比如 $attrs['data-id']，不能用点语法