useattrs用于获取组件中未声明为props的透传attributes，便于在自定义表单组件中自动绑定原生html属性到内部元素。
在 Vue 3 的组合式 API 中，useAttrs 是接收组件上未被声明为 props 的所有属性（即“透传 attributes”）的关键工具，特别适合封装自定义表单组件时，把原生 HTML 属性（如 class、id、placeholder、disabled 等）自动绑定到内部真实表单元素上。
为什么自定义表单组件需要 useAttrs
当你写一个封装了 <input> 或 <textarea></textarea> 的组件（比如 MyInput），用户希望像用原生标签一样传入 placeholder、required、autofocus 等属性。但这些属性不属于你显式定义的 props（比如你只定义了 v-model 对应的 modelValue 和 update:modelValue 事件），它们会默认被 Vue 当作“透传 attribute”收集起来 —— 正是 useAttrs() 返回的对象。
基本用法：解构 + v-bind 到子元素
在 setup 中调用 useAttrs()，得到一个响应式对象，然后用 v-bind 把它展开到内部表单元素上：
注意：必须关闭 inheritAttrs: false（Vue 3 默认为 true，但为了手动控制透传，通常显式设为 false；不过 useAttrs 本身不依赖该选项，只是习惯上配合使用）
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
import { defineComponent, useAttrs } from 'vue'
export default defineComponent({
name: 'MyInput',
props: {
modelValue: [String, Number],
// 其他明确需要的 prop，如 size、variant 等
},
setup(props, { emit }) {
const attrs = useAttrs() // 获取所有未声明的 attributes
const handleChange = (e) => {
emit('update:modelValue', e.target.value)
}
return () => (
<input type="text" value="{props.modelValue}" oninput="{handleChange}">
)
}
})
这样用户使用时：
<myinput v-model="name" placeholder="请输入姓名" id="user-name" class="w-full border rounded" required></myinput>
→ 所有 placeholder、id、class、required 都会原样落到内部 <input> 上。
常见注意事项和技巧
-
attrs 不包含已声明的 props：比如你声明了
placeholder作为 prop，它就不会出现在attrs里 —— 这是预期行为。若想同时支持 prop 控制和透传，需手动合并或优先级处理。 -
避免重复绑定冲突：如果你已在根元素写了
class="xxx"，又用{...attrs}传入另一个class，Vue 会自动合并（类名字符串拼接）。但像value、checked这类属性不能重复，所以务必确保你没在v-bind之外再手动写同名 attribute。 -
过滤特定属性（可选）：有时你想排除某些透传属性（例如自定义的
data-test-id只用于测试，不希望透传到 input）。可用解构剔除：
const { 'data-test-id': testId, ...restAttrs } = useAttrs()
// 然后用 {...restAttrs} 绑定，testId 单独处理
与 v-model 搭配使用的完整逻辑
自定义表单组件的核心是双向绑定。除了 useAttrs，你还需正确处理 v-model：
- props 接收
modelValue - 触发
update:modelValue事件更新父级数据 -
useAttrs负责把其他原生属性透传到底层元素
三者配合，才能让组件既支持语义化绑定，又保留原生表单的全部能力（包括无障碍属性、浏览器默认行为等）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
