useattrs 是获取透传属性的工具，需手动过滤、拆分事件与dom属性、禁用自动继承后显式绑定，并合并class/style。
在组合式 API 中，useAttrs 是处理透传属性的核心工具，但它本身不提供过滤能力——它返回的是全部未声明的属性对象。真正实现“过滤和处理”，靠的是手动解构、选择性绑定或条件合并。关键不是让 useAttrs 变成过滤器，而是用它拿到原始数据后，按需裁剪或重组。
一、获取透传属性并手动过滤特定字段
useAttrs() 返回一个响应式对象，你可以用解构 + 剩余运算符剔除不需要的属性，比如排除 title、data-test 或自定义前缀属性：
- 先调用
const attrs = useAttrs() - 再通过解构分离出要保留的属性（如 class、style、@click），或明确剔除黑名单字段
- 示例：只保留原生 HTML 属性，去掉所有以
data-开头的自定义属性
这样 rest 就是过滤后的透传属性，可用于后续绑定。
二、区分透传属性与事件监听器并分别处理
透传属性中混有普通 HTML 属性（如 id、tabindex）和事件监听器（如 @click、@input）。Vue 会把事件监听器转为 onXxx 形式存入 attrs（例如 @click → onClick）。你可以按命名规则识别并拆分：
- 用
Object.keys(attrs)遍历，检查键名是否以on开头且首字母大写（如onClick、onChange） - 将事件监听器提取到单独对象，其余归为 DOM 属性
- 便于分别绑定：
v-bind="domAttrs"+v-on="eventListeners"
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>同文件中添加一个普通<script></script>块，写export default { inheritAttrs: false } - 之后所有透传属性都需显式绑定，不会自动“泄露”到根节点
- 再结合 useAttrs 获取属性，按需分配给不同子元素
四、合并透传属性与组件自身属性（含 class/style 智能合并）
父组件传的 class 和组件模板里已有的 class 不会自动合并——useAttrs 默认甚至不包含 class 和 style（除非你没声明它们为 props）。要实现类似 Vue 自动合并的效果，得手动拼接：
- 从 attrs 中解构出
class和style（如果存在） - 用数组或字符串拼接方式合并：例如
[props.class, attrs.class].filter(Boolean).join(' ') - style 可用对象展开合并：
{ ...internalStyle, ...attrs.style }
const mergedStyle = { ...internalStyle, ...attrs.style };
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
