在Vue3中，useAttrs是一个用于提供组件属性的自定义hook函数。它的主要作用是为了可以访问到父组件传递给子组件的所有属性。需要注意如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。

1
2
3
4
5
6
7
8
9
10
import { defineComponent, useAttrs } from 'vue';
export default defineComponent({
  setup(props, context) {
    const attrs = useAttrs();
    
    return {
      attrs
    }
  }
})

我们通过useAttrs()将父组件传递给子组件的所有属性挂载到了attrs变量上，从而方便地访问这些属性。

需要注意的是，如果你的组件有某个属性值是动态变化的，则需要通过watch去监听该属性，并在回调函数中手动更新组件状态。因为useAttrs返回的仅仅是父组件传递过来的静态属性值，它并不会自动更新组件状态。
示例：
父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div>
    <h1>useAttrs</h1>
    <el-button type="primary" size="small" :icon="Edit"></el-button>
    <!-- 自定义组件 -->
    <HintButton type="primary" size="small" :icon="Edit" title="编辑按钮" @click="handler" @xxx="handler"></HintButton>
  </div>
</template>

<script setup lang="ts">
//vue3框架提供一个方法useAttrs方法,它可以获取组件身上的属性与事件！！！
//图标组件
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import HintButton from "./HintButton.vue";
//按钮点击的回调
const handler = ()=>{
  alert(12306);
}
</script>

<style scoped>
</style>

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div :title="title">
     <el-button :="$attrs"></el-button>   
  </div>
</template>

<script setup lang="ts">
//引入useAttrs方法:获取组件标签身上属性与事件
import {useAttrs} from 'vue';
//此方法执行会返回一个对象
let $attrs = useAttrs();

//万一用props接受title
let props =defineProps(['title']);
//props与useAttrs方法都可以获取父组件传递过来的属性与属性值
//但是props接受了useAttrs方法就获取不到了
console.log($attrs);
</script>

<style scoped>
</style>