vue组件属性透传是自动绑定未声明attribute到根元素，class/style智能合并，普通属性直接覆盖；多根或非根需禁用自动透传并手动处理；覆盖优先级取决于静态/动态绑定顺序及是否被props/emits消费。
Vue 组件的属性透传（Attribute Inheritance）不是“转发”，而是自动绑定未声明的 attribute 到根元素；覆盖逻辑则取决于绑定顺序和目标元素是否已有同名属性。
默认透传行为：单根组件自动接收未声明的 attribute
当子组件只有一个根元素，且未设置 inheritAttrs: false 时，父组件传入但未在 defineProps 中声明的 attribute（如 class、data-id、disabled、@click 等）会自动挂载到该根元素上。
-
class和style会智能合并：子组件根元素已有的class="btn"与父组件传入的class="primary large"合并为class="btn primary large" - 普通 attribute（如
id、title）直接覆盖：若根元素已有id="inner"，父组件传id="outer"，最终取id="outer" - v-on 监听器也会透传：父组件的
@click="handle"会绑定到根<button></button>上；若根元素自身也有@click，两个监听器都会触发
多根或非根元素绑定：必须手动控制
子组件有多个根节点（Fragment）、或需将属性绑定到内部非根元素（如封装 <el-input></el-input> 时想把 placeholder 传给内部 <input>），就必须禁用自动透传并手动处理。
- 在
<script setup></script>中调用defineOptions({ inheritAttrs: false }) - 用
useAttrs()获取透传对象，或在模板中用v-bind="$attrs"批量绑定 - 可选择性绑定：
<input :class="attrs.class" :placeholder="attrs.placeholder"> - 注意大小写：父组件传
data-test-id="123"，需通过attrs['data-test-id']访问
属性覆盖的优先级与边界
透传 attribute 的“覆盖”不是无条件替换，而取决于绑定时机和位置：
- 模板中静态写死的 attribute 优先级高于透传值（例如根元素写
class="fixed"，父组件传class="dynamic"，最终是class="fixed dynamic"—— 因为 class 合并而非覆盖） - 但
id、name等不支持合并的属性，透传值会覆盖模板中静态值 - 若同时使用
v-bind动态绑定和透传，后执行的绑定生效（模板中v-bind:id="computedId"与$attrs.id共存时，以v-bind表达式为准） - emits 声明过的事件监听器（如
emits: ['click']）不再进入$attrs，也就不会被透传
深层嵌套中的透传链路
透传不是“跳过中间层”，而是逐层向下继承：
- A → B → C 结构中，A 传
data-role="submit"给 B，B 未声明该 prop 且未禁用透传，则自动透传给 B 的根元素；若 B 的根是 C 组件，该 attribute 会继续透传到 C 的根元素（前提是 C 也未声明、未禁用） - 一旦某层组件设置了
inheritAttrs: false，透传链就中断，后续必须由该组件显式用v-bind="$attrs"或useAttrs()再向下传递 - 透传内容始终剔除已被当前组件
defineProps或emits消费掉的部分
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
