$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"></myinput>，这些都会落到外层 div 上。
选择性透传或合并属性
如果想保留自己的 class 或 style，同时合并父传的，可以这样写：
<div :class="['my-input', $attrs.class]" :style="[$attrs.style, { fontSize: '16px' }]" v-bind="$attrs">
<p>注意：要先解构 <code>$attrs</code> 中的 <code>class</code> 和 <code>style</code>，再手动合并，否则直接 <code>v-bind="$attrs"</code> 会覆盖你写的值。</p>
<h3>禁用自动继承（Vue 2.6+）</h3>
<p>如果不想让 <code>$attrs</code> 自动挂载到根元素（比如你完全自己控制透传目标），可在组件选项中设置：</p>
<pre class="brush:php;toolbar:false;">export default {
inheritAttrs: false,
// …
}
此时 $attrs 不会自动应用到根元素，必须手动 v-bind="$attrs"，否则什么都不会透传。
不复杂但容易忽略的是：只要根元素存在、没显式覆盖、没声明 props，$attrs 就能自然透传；显式绑定时，记得用 v-bind="$attrs" 补上缺口。
