vue3组件传参之useAttrs

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

useAttrs能够快速的获取到父组件在子组件标签上写的所有属性，不需要像defineProps一个一个去获取。

---

一、useAttrs是什么？

useAttrs是vue实例上组件传参的一种方法，类似于defineProps，使用该方法能够一次获取到子组件标签上的所有属性。

二、使用用例（el-button的二次封装）

1.在components文件中新建一个UseBuuton.vue文件

代码如下（示例）：
UseBuuton.vue

<template>
    <div class="use-button" title="这是一个use-button">
        <el-button :=$attrs >
            <slot></slot>
        </el-button>
    </div>
</template>
<script setup lang='ts'>
import { useAttrs } from 'vue'

const $attrs = useAttrs()
console.log($attrs);

</script>
<style lang="scss" scoped></style>

2.在view中使用封装的组件

代码如下（示例）：

<template>
  <div class="about">
    <el-button type="primary" :icon="Delete">el-button</el-button>
    <use-button type="primary" :icon="Delete">use-button </use-button>
  </div>
</template>

<script setup lang="ts">
import UseButton from '@/components/UseButton.vue';
import { Delete,Setting } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped></style>

3.效果图

4.补充

当useAttrs和defineProps一起使用时，defineProps优先级会更高，useAttrs只能获取到defineProps没有获取的属性。

---

总结

useAttrs可以快速的对一个组件的进行二次封装，非常好用！！