您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue組件二次封裝的實(shí)用技巧是什么”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue組件二次封裝的實(shí)用技巧是什么”吧!
我們可以使用一個(gè)沒有參數(shù)的 v-bind來實(shí)現(xiàn)props,events的透?jìng)鳎?它會(huì)將一個(gè)對(duì)象的所有屬性都作為 attribute 應(yīng)用到目標(biāo)元素或組件上, 這在官方文檔中有著詳細(xì)介紹。
<BaseButton v-bind="$attrs"/>
其中$attrs包含組件可以透?jìng)鲗傩缘膶?duì)象, 透?jìng)鲗傩园╬rops,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>
如果我們不希望透?jìng)髂承傩员热鏲lass, 我們可以通過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è)可以透?jìng)?slot的組件
slot可以通過下面這種方式透?jìng)鞯?/p>
<!-- 在組件中創(chuàng)建新的對(duì)應(yīng)名稱的插槽 --> <template #slotName> <!-- 在插槽內(nèi)部使用對(duì)應(yīng)名稱的插槽 --> <slot name="slotName" /> </template>
如果透?jìng)鞯膕lot比較少,我們可以通過在封裝組件內(nèi)部定義并使用插槽<template v-slot:slotName><slot name="slotName" /></template>來透?jìng)鞑宀?/p>
<template #slotName> <slot name="slotName" /> </template>
如果需要透?jìng)鞯膕lot不固定或者較多,我們可以通過動(dòng)態(tài)插槽名稱透?jìng)?/p>
<template #[slotName] v-for="(slot, slotName) in $slots" > <slot :name="slotName" /> </template>
如下是一個(gè)透?jìng)鞯膕lot的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>來透?jìng)髯饔糜虿宀鄄宀邸?/p>
<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" > <slot :name="slotName" v-bind="slotProps"/> </template>
封裝后的組件我們無法按照之前的情況調(diào)用組件實(shí)例中的屬性和方法,比如BaseButton有focus方法,在封裝之前我們可以通過下面這種方式調(diào)用
// 調(diào)用BaseButton的組件父組件 // <BaseButton ref="button"> const button = ref(); button.value.focus()
對(duì)于封裝后的組件,由于此時(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()
感謝各位的閱讀,以上就是“Vue組件二次封裝的實(shí)用技巧是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)Vue組件二次封裝的實(shí)用技巧是什么這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。