禁用非属性特性继承需设置 inheritAttrs: false，使未声明的 attribute 进入 $attrs 供手动透传，class/style 仍自动继承；Vue 3 中通过 defineOptions 配置并用 useAttrs() 增强控制力。
禁用非属性特性继承，只需在组件选项中设置 inheritAttrs: false。它不是为了“去掉属性”，而是把控制权交还给你——让 class、style 之外的那些未声明属性（比如 required、placeholder、id、data-test 等）不再自动落到根元素上，转而由你决定绑定到哪个具体节点。
为什么默认继承会带来问题？
Vue 默认把未声明的 attribute 自动加到组件的**单个根元素**上。但实际封装中常遇到：
- 组件模板有多个根节点（如 Fragment），Vue 不知道该往哪绑，直接报警告：
Extraneous non-props attributes were passed to component but could not be automatically inherited... - 根元素只是个包裹容器（比如外层
<div class="wrapper">），真正要接收 <code>disabled或autofocus的是内部的<input>，结果属性错位生效 - 使用 UI 库组件（如 Element Plus 的
el-input、iView 的Table）时，父组件传的原生属性无法直达底层，只能靠一堆 props 显式透传，代码冗长难维护 - 对基础输入框封装：把
placeholder、readonly、name等全交给内部<input>，而不是外层<label></label> - 对表格封装：把
size、border、highlight-hover-row等直接透传给<el-table></el-table>，避免每个都写成 props - 配合
v-on="$listeners"（Vue 2）或v-on="$attrs"（Vue 3 中事件也归入 $attrs）可一并透传原生事件，如@focus、@blur - 你可以放心给封装组件加
class="my-input"，它仍会作用在外层容器上，用于布局或主题控制 - 同时用
v-bind="$attrs"把其他属性交给内部 UI 组件，实现“样式归外、行为归内”的清晰分工 - 若需把 class 也透传到底层（比如让
el-input拥有自定义 class），就显式写:class="$attrs.class"，再从$attrs中剔除它（可用计算属性过滤）
inheritAttrs: false + $attrs 是封装 UI 组件的核心组合
设为 false 后，所有未声明的 attribute 都会收进组件实例的 $attrs 对象里。你可以用 v-bind="$attrs" 把它们一次性、精准地“透传”给目标子组件：
class 和 style 不受影响，这点很关键
inheritAttrs: false **不会阻止 class 和 style 的继承**。它们始终会合并应用到根元素（即使多根节点也不会报错）。这意味着：
Vue 3 中推荐写法（<script setup> 场景）</script>
在组合式 API 中，需显式调用 defineOptions 来配置：
import { defineOptions } from 'vue'
defineOptions({
inheritAttrs: false
})
// $attrs 可直接解构或使用
const attrs = useAttrs()
这样既保持语义清晰，又兼容 TypeScript 类型推导。搭配 useAttrs() 还能做动态过滤（比如排除 data-id 或重命名 custom-id），进一步提升封装灵活性。
