vue非prop属性自动继承本质是渲染阶段将未声明的html属性和原生事件监听器挂载至单根组件的最外层dom元素，不涉及响应式或props校验；多根组件需手动透传。
Vue 的非 Prop 属性自动继承，本质不是“传递数据”，而是“把没被消费的 HTML 属性和原生事件监听器，直接挂到组件最外层的那个 DOM 元素上”。它不涉及响应式更新逻辑，也不触发 props 的校验或默认值处理，纯粹是渲染阶段的属性分配行为。
哪些算“非 Prop 属性”？
只要父组件传了，但子组件没在 defineProps（或 props 选项）里声明，也没在 defineEmits（或 emits）里显式接收的属性，就属于非 Prop 属性：
- 通用 HTML 属性：class、style、id、title、tabindex、data-*、aria-*
- 布尔属性：disabled、readonly、required —— 存在即生效，不关心值是 true 还是空字符串
- 原生事件监听器：@click、@input、@focus、@keydown 等（仅限浏览器原生事件，不包括自定义事件）
单根组件下怎么继承？
当组件模板只有一个顶层元素（比如一个 <button></button> 或 <div>），Vue 会自动把所有非 Prop 属性加到它身上：
<ul>
<li>
<strong>class 和 style 会合并</strong>：子组件根节点已有 <code>class="btn"，父组件传 class="large primary"，最终是 class="btn large primary"
id="inner"，父组件传 id="outer"，结果就是 id="outer"
@click="innerHandler"，父组件再传 @click="outerHandler"，两个函数都会触发，顺序是子组件内监听先执行为什么多根组件不自动继承？
像这样写就是多根（Fragment）：
<header></header><main></main><footer></footer>
Vue 不知道该把 class 或 @click 加到哪个节点上，所以不会自动处理，控制台会警告：
Extraneous non-props attributes were passed to component but could not be auto inherited.
此时必须手动指定目标：
- 设
inheritAttrs: false关闭默认行为 - 用
v-bind="$attrs"显式绑定到某个元素，比如<header v-bind="$attrs"></header> - 或者解构使用：
:class="$attrs.class" :data-id="$attrs['data-id']"
什么时候要关掉自动继承？
不是所有场景都适合让属性落到根元素上：
- 根是
<div> 包裹层，真正要透传的是内部的 <code><input>或第三方组件（如<el-input></el-input>） - 想把
@click绑在包装容器上，而不是内部按钮 - 需要对传入的
class做额外处理（比如加前缀、条件过滤） - 封装高阶组件时，要避免根元素被意外覆盖样式或行为
