vue组件透传attributes依赖默认属性继承机制：单根节点自动合并class、style、事件等未声明属性；多根需手动v-bind="$attrs"；可useattrs()获取并控制透传，inheritattrs: false关闭透传。
Vue 组件通过透传 Attributes 实现未声明属性自动应用到根节点，本质依赖其默认的“属性继承”机制。只要组件是单根节点、且未显式禁用该行为，class、style、id、data-*、@click 等未被 props 或 emits 声明的属性，就会自动落到根元素上。
单根节点下自动生效
这是最常用也最省力的方式。Vue 会识别组件模板是否只有一个顶层元素，若是，则所有未声明的 attribute（包括 HTML 属性和 v-on 监听器）直接合并并挂载到该元素。
- 根元素已有 class 时，父传 class 会与之合并（如根为
<button class="btn"></button>，父传class="large"→ 渲染为class="btn large"） - 根元素已绑定
@click，父级再传@click，两个监听器都会触发，子组件内部逻辑先执行 - 自定义属性如
data-id="123"、aria-label="submit"同样透传，无需额外处理
多根节点必须手动绑定
当组件模板包含多个同级根节点（比如 v-bind="$attrs" 或 :class="attrs.class" 等方式指定目标。
- 在组合式 API 中，用
const attrs = useAttrs()获取透传对象，再按需解构绑定 - 若想完全关闭自动透传（例如避免干扰封装的子组件），可在
setup中设置inheritAttrs: false - 常见做法：把
$attrs绑定到语义最合适的容器上，比如将事件和样式集中挂到<main></main>或外层<div> <h3>深层嵌套也能逐层透传</h3> <p>透传不是只到第一层子组件。如果 <code><mybutton></mybutton>内部渲染的是<basebutton></basebutton>，而<mybutton></mybutton>本身没声明title或@hover，那么这些属性会继续向下穿透到<basebutton></basebutton>的根元素——前提是中间每一层都保持单根且未拦截。- 只要中间组件没用
inheritAttrs: false，也没在props或emits中声明该属性，它就一路“滑下去” - 适合构建 UI 库中的基础组件链，比如
<elbutton> → <basebutton> → <button></button></basebutton></elbutton> - 注意：一旦某层组件把某个属性声明为 prop（如
title），它就不会再透传给下一层，除非你主动在该层模板中再次透传
需要干预时怎么控制
透传虽方便，但有时需过滤或重定向。比如表单组件要让
class落在包裹层，@input落在内部<input>上，就不能靠默认行为。- 用
useAttrs()拿到全部透传对象，再用解构分离关心的属性：const { class: cls, ...rest } = attrs - 对特定属性做转换：把
size="large"映射为class="size-large"，再与其他 class 合并 - 配合
v-bind动态绑定：在<input v-bind="rest">中把剩余属性全透过去，干净又可控
- 只要中间组件没用
