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

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

您可能感兴趣的文章:

浅谈使用Vue完成移动端apk项目
这几天，我做了一个vue移动端的小项目，本文主要介绍了Vue移动端apk项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
webpack+vue中使用别名路径引用静态图片地址
这篇文章主要介绍了webpack+vue中使用别名路径引用静态图片地址，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
Vue3封装组件完整实例(带回调事件)
Vue.js已成为现代Web开发中不可或缺的技术之一,虽然Vue.js的一些基础概念和语法比较易学,但深入挖掘Vue.js的核心概念和功能需要更多的实践,下面这篇文章主要给大家介绍了关于Vue3封装组件(带回调事件)的相关资料,需要的朋友可以参考下
2023-06-06
vue.js实现二级菜单效果
这篇文章主要为大家详细介绍了vue.js实现二级菜单效果的具体方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
基于vue-cli创建的项目的目录结构及说明介绍
下面小编就为大家分享一篇基于vue-cli创建的项目的目录结构及说明介绍，具有很好的参考价值，希望对大家有所帮助
2017-11-11
vue不用import直接调用实现接口api文件封装
这篇文章主要为大家介绍了vue不用import直接调用实现接口api文件封装，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
如何利用VUE创建视频流应用
这篇文章主要给大家介绍了关于如何利用VUE创建视频流应用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
关于vue2使用swiper4的踩坑记录
最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
2022-01-01
在IDEA中创建vue hello-world项目全过程
用户分享了在IDEA中搭建Vue HelloWorld项目的简要步骤：安装Node.js和npm,配置淘宝镜像加速,安装Vue插件,创建项目并指定名称,运行npm run serve启动服务,最终通过本地8080端口访问项目
2025-09-09
vue3搭配pinia的踩坑实战记录
Pinia是一个同时支持Vue2和Vue3的应用状态管理工具,简单来说就是为了管理整个应用中的响应式数据,解决各个组件交互时数据状态的不好管理的问题,下面这篇文章主要给大家介绍了关于vue3搭配pinia踩坑的相关资料,需要的朋友可以参考下
2022-04-04