$attrs包含父组件传入但未声明的属性，默认自动继承到单根元素上；显式绑定时需v-bind="$attrs"透传，Vue 3推荐显式处理，inheritAttrs: false可禁用自动继承。
在 Options API 中，$attrs 是一个对象，包含父组件传入但未被 props 声明的属性（如 class、style、自定义属性等），默认会自动继承到组件的**根元素**上。但如果你显式绑定了根元素的某些属性（比如写了 class="xxx"），就会覆盖继承行为——这时就需要手动用 v-bind="$attrs" 透传。
确保 $attrs 能正常透传的前提
Vue 2.4+ 开始支持自动继承；Vue 3 默认关闭自动继承（Options API 下仍兼容旧行为，但推荐显式处理）。需注意：
- 组件必须有且仅有一个根元素（否则
$attrs不会自动挂载） - 没有在
props中声明该属性（否则它会进入props，不在$attrs中） - 没在模板根元素上显式绑定同名属性（如写了
id="abc"，那父传的id就不会透传）
手动透传：用 v-bind="$attrs"
在根元素上添加 v-bind="$attrs"，即可把所有未声明的属性（包括 class、style、data-*、@click 等）原样透传过去：
<template>
<div v-bind="$attrs" class="my-input">
<input v-model="value" />
</div>
</template>
这样父组件写：<MyInput id="user-name" data-test="input" @focus="onFocus" />，这些都会落到外层 div 上。
选择性透传或合并属性
如果想保留自己的 class 或 style，同时合并父传的，可以这样写：
<div
:class="['my-input', $attrs.class]"
:style="[$attrs.style, { fontSize: '16px' }]"
v-bind="$attrs"
>
注意：要先解构 $attrs 中的 class 和 style，再手动合并，否则直接 v-bind="$attrs" 会覆盖你写的值。
禁用自动继承（Vue 2.6+）
如果不想让 $attrs 自动挂载到根元素（比如你完全自己控制透传目标），可在组件选项中设置：
export default {
inheritAttrs: false,
// …
}
此时 $attrs 不会自动应用到根元素，必须手动 v-bind="$attrs"，否则什么都不会透传。
不复杂但容易忽略的是：只要根元素存在、没显式覆盖、没声明 props，$attrs 就能自然透传；显式绑定时，记得用 v-bind="$attrs" 补上缺口。
