提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
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可以快速的对一个组件的进行二次封装,非常好用!!