useAttrs 是获取透传属性的工具，需手动过滤、拆分事件与DOM属性、禁用自动继承后显式绑定，并合并class/style。

在组合式 API 中，useAttrs 是处理透传属性的核心工具，但它本身不提供过滤能力——它返回的是全部未声明的属性对象。真正实现“过滤和处理”，靠的是手动解构、选择性绑定或条件合并。关键不是让 useAttrs 变成过滤器，而是用它拿到原始数据后，按需裁剪或重组。

一、获取透传属性并手动过滤特定字段

useAttrs() 返回一个响应式对象，你可以用解构 + 剩余运算符剔除不需要的属性，比如排除 title、data-test 或自定义前缀属性：

• 先调用 const attrs = useAttrs()
• 再通过解构分离出要保留的属性（如 class、style、@click），或明确剔除黑名单字段
• 示例：只保留原生 HTML 属性，去掉所有以 data- 开头的自定义属性

const { title, 'data-id': _, 'data-test': __, ...rest } = attrs;

这样 rest 就是过滤后的透传属性，可用于后续绑定。

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

二、区分透传属性与事件监听器并分别处理

透传属性中混有普通 HTML 属性（如 id、tabindex）和事件监听器（如 @click、@input）。Vue 会把事件监听器转为 onXxx 形式存入 attrs（例如 @click → onClick）。你可以按命名规则识别并拆分：

• 用 Object.keys(attrs) 遍历，检查键名是否以 on 开头且首字母大写（如 onClick、onChange）
• 将事件监听器提取到单独对象，其余归为 DOM 属性
• 便于分别绑定：v-bind="domAttrs" + v-on="eventListeners"

const domAttrs = {};
const eventListeners = {};
Object.entries(attrs).forEach(([key, value]) => {
  if (/^on[A-Z]/.test(key)) {
    eventListeners[key] = value;
  } else {
    domAttrs[key] = value;
  }
});

三、禁用默认透传后精准控制绑定目标

默认情况下，单根组件会自动把所有透传属性挂载到根元素上。若需把某些属性透传给内部子元素（比如把 class 给外层容器、style 给内层按钮），必须先关闭自动继承：

• 在 <script setup> 同文件中添加一个普通 <script> 块，写 export default { inheritAttrs: false }
• 之后所有透传属性都需显式绑定，不会自动“泄露”到根节点
• 再结合 useAttrs 获取属性，按需分配给不同子元素

<script>
export default {
  inheritAttrs: false
}
</script>

四、合并透传属性与组件自身属性（含 class/style 智能合并）

父组件传的 class 和组件模板里已有的 class 不会自动合并——useAttrs 默认甚至不包含 class 和 style（除非你没声明它们为 props）。要实现类似 Vue 自动合并的效果，得手动拼接：

• 从 attrs 中解构出 class 和 style（如果存在）
• 用数组或字符串拼接方式合并：例如 [props.class, attrs.class].filter(Boolean).join(' ')
• style 可用对象展开合并：{ ...internalStyle, ...attrs.style }

const mergedClass = [props.class, attrs.class].filter(Boolean).join(' ');
const mergedStyle = { ...internalStyle, ...attrs.style };