非 prop 属性默认自动透传至子组件根元素；多层嵌套时需用 v-bind="$attrs" 显式透传；多根节点或需自定义时设 inheritattrs: false 并手动绑定。
在 Vue 组件嵌套中，非 Prop 属性（如 class、style、id、data-test、onClick 等）默认会自动“透传”到子组件的根元素上。但当组件结构变深、或子组件有多个根节点、或需要把属性绑定到内部某个特定元素时，就必须主动干预——核心就是靠 $attrs 和 inheritAttrs 配合使用。
非 Prop 属性默认怎么走？
Vue 会自动把父组件传入但未被 props 声明的属性，合并到子组件模板的最外层单个根元素上。比如：
- 父组件写：
<myinput placeholder="搜一下" data-id="search-box"></myinput> - 子组件没声明
placeholder或data-id为 prop → 这两个属性会自动加到子组件的根<input>上
多层级嵌套时怎么避免中间组件重复声明？
如果 App → A → B → C，而只有 C 需要用到某个 disabled 或 tabindex，A 和 B 完全不关心，就别让它们在 props 里白写一遍。正确做法是：
- A 组件不声明该属性为 prop，保持
$attrs完整 - A 的模板中用
v-bind="$attrs"把所有未消费的属性透传给 B：<b v-bind="$attrs"></b> - B 同理透传给 C；C 按需取用（比如
$attrs.disabled）或继续绑定到底层元素
子组件有多个根节点怎么办？
Vue 3 支持片段（multiple root nodes），但此时无法自动决定把非 Prop 属性挂到哪个根上——会直接报 warning。必须显式处理：
- 设置
inheritAttrs: false关闭默认继承 - 手动用
v-bind="$attrs"绑定到你希望接收属性的那个元素上（比如第一个<div> 或某个 <code><button></button>） - 其余根节点若不需要这些属性，就不绑定
- 在组件选项中写
inheritAttrs: false - 然后在模板里按需解构使用：
<div class="wrapper"><input v-bind="$attrs"></div> - 甚至只取其中几个：
<input :class="$attrs.class" :disabled="$attrs.disabled">
想禁用默认透传或做自定义逻辑？
某些场景下你不希望 class/style 自动落到根元素（比如封装了带装饰容器的组件），可以：
本质上，$attrs 是 Vue 提供的“未被认领的属性收件箱”，只要不主动消费（声明为 prop），它就一直带着往下走。透传不是魔法，而是靠每一层有意识地选择“转交”或“截留”。
