vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3组件传参之useAttrs

vue3组件传参之useAttrs的用法解读

作者:一千零一金

文章介绍了Vue中的useAttrs功能,它允许开发者快速获取父组件传递给子组件的所有属性,无需逐一定义,文章通过一个使用案例(对el-button的二次封装)展示了useAttrs的实际应用,说明了其便捷性和实用性

前言

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

一、useAttrs是什么?

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

二、使用用例(el-button的二次封装)

1.在components文件中新建一个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可以快速的对一个组件的进行二次封装,非常好用!!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文