vue3组件传参之useAttrs的用法解读
作者:一千零一金
文章介绍了Vue中的useAttrs功能,它允许开发者快速获取父组件传递给子组件的所有属性,无需逐一定义,文章通过一个使用案例(对el-button的二次封装)展示了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可以快速的对一个组件的进行二次封装,非常好用!!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。