useAttrs() 获取透传属性

最后更新：2026-10-22

useAttrs() 返回未被 props/emits 声明的透传属性（class、id、事件监听等），用于手动分发。

📝 语法

const attrs = useAttrs()
// 模板：<div v-bind="attrs"></div>

返回值：响应式对象（不响应后续变化，但可读取最新值）

修改下面的代码，在预览区实时查看效果：

输出：

渲染出的按钮同时带有 base 与 hl 类、data-role 属性。

ℹ️ 说明 没声明 props 时透传属性默认自动落在根元素上；需要落到内部非根元素时才用它。

⚠️ 注意 不要试图修改 attrs：它是只读的，改动会警告且无效。

💡 提示 配合 inheritAttrs: false 使用：关掉自动透传，再手动精确分发。

更多案例即将上线。

Q 和 $attrs 的区别？

A 组合式 API 版本，功能一致；$attrs 是模板/实例上的写法。

Q attrs 会随父组件更新吗？

A 会同步最新值，但对象本身不是深度响应的（内部值不触发依赖追踪）。

Q 什么时候必须手动分发？

A 组件有多个根元素，或需要把属性放到特定内部元素时。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。