Vue組件二次封裝的一些實(shí)用技巧總結(jié)
前言
在開發(fā)Vue項(xiàng)目我們一般使用第三方UI組件庫進(jìn)行開發(fā)，如element-plus, @arco-design/web-Vue, naive-ui等, 但是這些組件提供的接口并不一定滿足我們的需求，這時(shí)我們可以通過對組件庫組件的二次封裝，來滿足我們特殊的需求。
對于封裝組件有一個(gè)大原則就是我們應(yīng)該盡量保持原有組件的接口，除了我們需要封裝的功能外，我們不應(yīng)該改變原有組件的接口，即保持原有組件提供的接口如props,events,slots等不變。
為了實(shí)現(xiàn)這一原則我們就需要將新組件的接口與舊組件的接口一一對應(yīng), 當(dāng)然我們可以通過在新組件中一一聲明對應(yīng)的接口來實(shí)現(xiàn)（或者只實(shí)現(xiàn)我們目前需要用到的接口）但這種辦法雖然簡單但看起來卻極其很繁瑣, 有沒有一種方法可以實(shí)現(xiàn)props,events,slots的自動透傳呢？
透傳 Attribute
我們可以使用一個(gè)沒有參數(shù)的 v-bind來實(shí)現(xiàn)props,events的透傳， 它會將一個(gè)對象的所有屬性都作為 attribute 應(yīng)用到目標(biāo)元素或組件上, 這在官方文檔中有著詳細(xì)介紹。
<BaseButton v-bind="$attrs"/>
其中$attrs包含組件可以透傳屬性的對象, 透傳屬性包括props,events, class,style,id等。(不包含接收組件顯式聲明的 props、emits以及slots )
如下,是一個(gè)封裝el-input的默認(rèn)可清空的的組件，由于我們已經(jīng)在defineProps聲明過clearable, 所以此時(shí)我們需要顯性傳遞clearable屬性
<template>
<div class="my-input">
{{ label }}
<el-input v-bind="$attrs" :clearable="clearable"></el-input>
</div>
</template>
<script setup>
defineProps({
label: String,
clearable: {
type: Boolean,
default: true,
},
});
</script>如果我們不希望透傳某些屬性比如class, 我們可以通過useAttrs來實(shí)現(xiàn)
<template>
<div class="my-input">
{{ label }}
<el-input v-bind="filteredAttrs" :clearable="clearable"></el-input>
</div>
</template>
<script setup>
import { computed, useAttrs } from 'Vue';
defineProps({
label: String,
clearable: {
type: Boolean,
default: true,
},
});
const attrs = useAttrs();
const filteredAttrs = computed(() => {
return { ...attrs, class: undefined };
});
</script>上述封裝的組件還有個(gè)缺點(diǎn), 就是我們將無法使用el-input本身提供的slot,下面我們就來實(shí)現(xiàn)一個(gè)可以透傳 slot的組件
透傳 slot
slot可以通過下面這種方式透傳的
<!-- 在組件中創(chuàng)建新的對應(yīng)名稱的插槽 -->
<template #slotName>
<!-- 在插槽內(nèi)部使用對應(yīng)名稱的插槽 -->
<slot name="slotName" />
</template>普通slot
如果透傳的slot比較少，我們可以通過在封裝組件內(nèi)部定義并使用插槽<template v-slot:slotName><slot name="slotName" /></template>來透傳插槽
<template #slotName>
<slot name="slotName" />
</template>動態(tài)插槽名
如果需要透傳的slot不固定或者較多，我們可以通過動態(tài)插槽名稱透傳
<template #[slotName] v-for="(slot, slotName) in $slots" >
<slot :name="slotName" />
</template>如下是一個(gè)透傳的slot的el-input組件
<template>
<div class="my-input">
{{ label }}
<el-input v-bind="$attrs" :clearable="clearable">
<template #[slotName] v-for="(slot, slotName) in $slots">
<slot :name="slotName" />
</template>
</el-input>
</div>
</template>
<script setup>
defineProps({
label: String,
clearable: {
type: Boolean,
default: true,
},
});
</script>作用域插槽
如果需要封裝組件使用了作用域插槽，我們可以通過<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>來透傳作用域插槽插槽。
<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
<slot :name="slotName" v-bind="slotProps"/>
</template>封裝組件存在的問題
組件實(shí)例屬性和方法的調(diào)用
封裝后的組件我們無法按照之前的情況調(diào)用組件實(shí)例中的屬性和方法，比如BaseButton有focus方法,在封裝之前我們可以通過下面這種方式調(diào)用
// 調(diào)用BaseButton的組件父組件 // <BaseButton ref="button"> const button = ref(); button.value.focus()
對于封裝后的組件，由于此時(shí)button指向我們的MyButton,并不指向BaseButton的實(shí)例，所以我們需要在包裝的組件中聲明并暴露BaseButton事例
//我們封裝的組件 // MyButton.Vue // <BaseButton ref="button"> const button = ref();
注意如果我們使用 <script setup>，是沒辦法訪問實(shí)例中的屬性的，詳情參考vuejs.org/api/sfc-scr…
此時(shí)可以通過defineExpose顯式公開ref屬性
// 我們封裝的組件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();
defineExpose({
button
});然后在父組件中我就可以通過實(shí)例鏈?zhǔn)秸{(diào)用封裝的組件了
// <MyButton ref="button"> const button = ref(); button.value.button.focus()
總結(jié)
到此這篇關(guān)于Vue組件二次封裝的一些實(shí)用技巧的文章就介紹到這了,更多相關(guān)Vue組件二次封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element UI框架中巧用樹選擇器的實(shí)現(xiàn)
這篇文章主要介紹了Element UI框架中巧用樹選擇器的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
圖片預(yù)覽插件vue-photo-preview的使用示例詳解
這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
Vue3實(shí)現(xiàn)獲取驗(yàn)證碼按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了Vue3實(shí)現(xiàn)獲取驗(yàn)證碼按鈕倒計(jì)時(shí)效果,用戶點(diǎn)擊獲取驗(yàn)證碼按鈕,發(fā)送請求給后端,按鈕失效,并且開始倒計(jì)時(shí)60秒；在此期間,用戶無法再次點(diǎn)擊按鈕,即使用戶刷新頁面,倒計(jì)時(shí)依然存在,直到倒計(jì)時(shí)完畢,按鈕恢復(fù),感興趣的小伙伴跟著小編一起來看看吧2024-10-10
這篇文章介紹了在?Web?應(yīng)用中處理大量數(shù)據(jù)展示的兩種滾動加載更多方案,滾動加載更多通過分頁工作,優(yōu)點(diǎn)是實(shí)現(xiàn)簡單、用戶體驗(yàn)流暢,缺點(diǎn)是內(nèi)存占用可能過高,虛擬列表只渲染視口內(nèi)容,性能好但實(shí)現(xiàn)復(fù)雜,本文介紹了Vue實(shí)現(xiàn)滾動加載更多效果,需要的朋友可以參考下2024-12-12
Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript（JS）編寫代碼,但也會有調(diào)整編寫語言使用TypeScript（TS）的需求,因此,在Vue3項(xiàng)目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對象本身（對象的增刪值）或者對象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會運(yùn)行一些函數(shù)，最常見的示render函數(shù)2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue生命周期的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作
這篇文章主要介紹了vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09