在 Vue SFC 中使用 useAttrs 需导入并调用获取非 prop 属性对象，配合 v-bind 透传；需设 inheritAttrs: false 才能手动控制透传目标，多根节点须显式绑定到单个元素。
在 Vue 单文件组件（SFC）中使用 useAttrs，核心是两步：导入函数、调用获取属性对象，并配合模板中的 v-bind 实现透传。它不依赖响应式，返回的是普通 JavaScript 对象，但能完整捕获父组件传入却未被 props 声明的属性和事件监听器（如 @click、@input）。
基础写法：导入 + 调用 + 绑定
在 <script setup></script> 中直接使用：
- 导入：
import { useAttrs } from 'vue' - 调用：
const attrs = useAttrs()，得到一个包含所有非 prop 属性的对象 - 模板中绑定：
<div v-bind="attrs"></div>，让 class、style、id、自定义属性甚至@click都自动挂载到该元素上
注意 inheritAttrs 默认行为
Vue 默认开启 inheritAttrs: true（无需手动设置），此时未声明的属性会自动“冒泡”到根元素。但如果你希望把 attrs 透传给内部某个子元素（比如内部的 <input>），就必须显式关闭默认继承：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 在
<script setup></script>中加一行：defineOptions({ inheritAttrs: false }) - 否则
useAttrs()返回的内容仍会被 Vue 自动挂到根节点，导致你手动绑定时重复或冲突
过滤或解构 attrs 的常见需求
不是所有非 prop 属性都适合透传，比如 ref、key、class 或 style 可能需要单独处理：
立即学习“前端免费学习笔记（深入）”；
- 排除 ref 和 key：
const { ref, key, ...rest } = attrs，再用v-bind="rest" - 合并 class：
const cls = [attrs.class, 'my-custom-class'].filter(Boolean).join(' ')，然后:class="cls" - style 同理可合并，避免覆盖父组件传入的内联样式
多根节点组件必须显式绑定
如果组件模板不是单个根元素（例如并列的 <header></header> 和 <main></main>），Vue 不会自动选择透传目标，会报运行时警告：
- 解决方式：选一个合适的位置（通常是承载主要内容的节点），加上
v-bind="attrs" - 例如：
<slot v-bind="attrs"></slot>，这样插槽内容就能接收父组件传来的 ref、事件等能力 - 注意：不能写在多个节点上，否则可能引发重复绑定或冲突
