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

更新时间：2025年10月11日 15:11:58 作者：一千零一金

文章介绍了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可以快速的对一个组件的进行二次封装，非常好用！！

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

您可能感兴趣的文章:

解决vant-UI库修改样式无效的问题
这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3中 provide 和 inject 用法小结
父子组件传递数据时,使用的是props和emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦,这篇文章主要介绍了vue3中 provide 和 inject 用法,需要的朋友可以参考下
2023-11-11
vue按需引入element Transfer 穿梭框
这篇文章主要介绍了vue按需引入element Transfer 穿梭框的相关资料,需要的朋友可以参考下
2017-09-09
解决Vue中的生命周期beforeDestory不触发的问题
这篇文章主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
VueJs中toRef与toRefs函数对比详解
这篇文章主要为大家介绍了VueJs中toRef与toRefs函数对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
示例vue 的keep-alive缓存功能的实现
这篇文章主要介绍了示例vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue2与Vue3兄弟组件通讯bus的区别及用法
这篇文章主要介绍了Vue2与Vue3兄弟组件通讯bus的区别及用法，有需要的朋友可以借鉴参考下，希望可以有所帮助，祝大家多多进步早日升职加薪
2021-09-09
vue全局引入scss(mixin)
本文主要介绍了 vue全局引入scss,我们在写VUE的时候,会使用scss，也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式,下面来看详细内容,需要的朋友可以参考一下
2021-11-11
vue3中el-table实现表格合计行的示例代码
这篇文章主要介绍了vue3中el-table实现表格合计行,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
Vue实现倒计时小功能
这篇文章主要为大家详细介绍了Vue实现倒计时小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09