vue3組件傳參之useAttrs的用法解讀
更新時(shí)間：2025年10月11日 15:11:58 作者：一千零一金
文章介紹了Vue中的useAttrs功能,它允許開發(fā)者快速獲取父組件傳遞給子組件的所有屬性,無需逐一定義,文章通過一個(gè)使用案例（對(duì)el-button的二次封裝）展示了useAttrs的實(shí)際應(yīng)用,說明了其便捷性和實(shí)用性
前言
useAttrs能夠快速的獲取到父組件在子組件標(biāo)簽上寫的所有屬性，不需要像defineProps一個(gè)一個(gè)去獲取。
一、useAttrs是什么？
useAttrs是vue實(shí)例上組件傳參的一種方法，類似于defineProps，使用該方法能夠一次獲取到子組件標(biāo)簽上的所有屬性。
二、使用用例（el-button的二次封裝）
1.在components文件中新建一個(gè)UseBuuton.vue文件
代碼如下（示例）：
- UseBuuton.vue
<template>
<div class="use-button" title="這是一個(gè)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.補(bǔ)充
當(dāng)useAttrs和defineProps一起使用時(shí)，defineProps優(yōu)先級(jí)會(huì)更高，useAttrs只能獲取到defineProps沒有獲取的屬性。
總結(jié)
useAttrs可以快速的對(duì)一個(gè)組件的進(jìn)行二次封裝，非常好用?。?/p>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談使用Vue完成移動(dòng)端apk項(xiàng)目
這幾天，我做了一個(gè)vue移動(dòng)端的小項(xiàng)目，本文主要介紹了Vue移動(dòng)端apk項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue3封裝組件完整實(shí)例(帶回調(diào)事件)
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)二級(jí)菜單效果的具體方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
基于vue-cli創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)及說明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)及說明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2017-11-11
vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝
這篇文章主要為大家介紹了vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要給大家介紹了關(guān)于如何利用VUE創(chuàng)建視頻流應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01
在IDEA中創(chuàng)建vue hello-world項(xiàng)目全過程
用戶分享了在IDEA中搭建Vue HelloWorld項(xiàng)目的簡要步驟：安裝Node.js和npm,配置淘寶鏡像加速,安裝Vue插件,創(chuàng)建項(xiàng)目并指定名稱,運(yùn)行npm run serve啟動(dòng)服務(wù),最終通過本地8080端口訪問項(xiàng)目2025-09-09
Pinia是一個(gè)同時(shí)支持Vue2和Vue3的應(yīng)用狀態(tài)管理工具,簡單來說就是為了管理整個(gè)應(yīng)用中的響應(yīng)式數(shù)據(jù),解決各個(gè)組件交互時(shí)數(shù)據(jù)狀態(tài)的不好管理的問題,下面這篇文章主要給大家介紹了關(guān)于vue3搭配pinia踩坑的相關(guān)資料,需要的朋友可以參考下2022-04-04