一 什么是useAttrs

useAttrs 是 Vue 3 Composition API 中提供的一个函数，它属于 Vue 的组合式 API 工具集的一部分。通过 useAttrs，你可以访问传递给组件但未被声明为 props 的所有属性。这对于处理非 prop 特性（attributes）特别有用，比如 HTML 特性或自定义数据特性等。

它返回的是一个响应式对象，包含了父组件传递下来的所有非 prop 属性（如 class, style, id, data-* 等 HTML 原生属性），以及监听器（如 @click, @input 等）。 

使用场景

• 当你需要获取没有在 props 中声明的属性时。
• 在需要将属性透传（attribute inheritance）到子组件或根元素时非常有用。

二  基本使用 

       需要引用element-plus

        npm install element-plus --save

        main.js中引用element-plus

        import ElementPlus from 'element-plus'

        import 'element-plus/dist/index.css'

        app.use(ElementPlus)

父组件Parent.vue

<template><div class="props-text"><h1>useAttrs</h1><!--useAttrs() 是 Vue 3 Composition API 中的一个函数，用于访问当前组件的 非 props 属性（non-prop attributes）。这些属性通常包括 class、style、id、原生 HTML 属性等。--><h1>我是父组件</h1><el-button type="primary" size="small" :icon="Edit"></el-button><hr><CustomButton type="primary" size="small" :icon="Edit" title="编辑" @click="handler"></CustomButton></div>
</template>
<script setup>
//引入图标按钮  网址：https://element-plus.org/zh-CN/component/button.html
import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue'
import CustomButton from './CustomButton.vue';const handler = () => {console.log('点击了按钮');
}
</script><style scoped>
.props-text {width: 400px;height: 400px;background-color: burlywood;
}
</style>

自定义按钮组件CustomButton.vue

<template>
<div><el-button v-bind="$attrs"></el-button><el-button :="$attrs"></el-button><el-button :type="$attrs.type" :size="$attrs.size" :icon="$attrs.icon"></el-button>
</div>
</template><script setup>
import { useAttrs } from 'vue';
let $attrs = useAttrs();let props = defineProps(['title'])
console.log(props.title);
console.log($attrs);
//同时使用 $attrs 和 props  优先props 会导致 $attrs.title 丢失
</script><style></style>

三 注意事项