您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue中的插槽是什么及怎么用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇Vue中的插槽是什么及怎么用文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
在 Vue 中,插槽是個(gè)很強(qiáng)大的功能,它可以使封裝的組件靈活性增強(qiáng)很多,比如你在封裝一個(gè)組件時(shí)使用了插槽,那在父組件調(diào)用時(shí),這里的內(nèi)容就可以由父組件自由定義,而無(wú)需在封裝組件時(shí)苦想如何覆蓋各種使用場(chǎng)景。
假設(shè)我們現(xiàn)在有一個(gè)需要封裝的組件 SlotComponent
<template> <div>這是一個(gè)slot:<slot> </slot></div> </template>
<SlotComponent>來(lái)自父組件的內(nèi)容</SlotComponent>
在 slot
中的內(nèi)容就可以在父組件中任意定義。要是組件中沒(méi)有<slot>
元素,那么在父組件調(diào)用時(shí),組件起始和結(jié)束標(biāo)簽之間的內(nèi)容就都會(huì)丟失掉。
既然 slot
是在 SlotComponent
組件中的,那在父組件中調(diào)用的時(shí)候能否能使用 SlotComponent
組件里的數(shù)據(jù)呢 ? 顯然是不能的,因?yàn)樗麄兯幍淖饔糜虿⒉幌嗤?/p>
父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的;子模板里的所有內(nèi)容都是在子作用域中編譯的。
插槽也可以設(shè)置默認(rèn)的內(nèi)容,這有點(diǎn)像 es6
中函數(shù)參數(shù)的默認(rèn)值,當(dāng)父組件調(diào)用時(shí)并沒(méi)有提供內(nèi)容,那么這個(gè)默認(rèn)值就會(huì)被渲染出來(lái)。提供了內(nèi)容的話,則會(huì)替代默認(rèn)內(nèi)容。
<template> <div> <slot>這是slot的默認(rèn)內(nèi)容</slot> </div> </template>
<DefaultSlot></DefaultSlot>
在調(diào)用時(shí)標(biāo)簽之間并沒(méi)有提供內(nèi)容,默認(rèn)值得以渲染,成為一個(gè)兜底內(nèi)容。
如果在組件中我需要多個(gè)地方用到插槽,那就需要給 slot
添加 name
,來(lái)區(qū)分內(nèi)容渲染到什么地方。
// named slot,名字叫 NamedSlot <template> <div> 這是具名插槽 <div> <slot name="slot1"></slot> </div> <div> <slot name="slot2"></slot> </div> <div> <slot name="slot3"></slot> </div> </div> </template> // 在父組件中調(diào)用 <NamedSlot> <template v-slot:slot1>這是插入slot1的內(nèi)容</template> <template v-slot:slot2>這是插入slot2的內(nèi)容</template> <template v-slot:slot3>這是插入slot3的內(nèi)容</template> </NamedSlot>
給 slot
加上 name
屬性后,可以通過(guò) v-slot:slotName
的形式分發(fā)內(nèi)容。不給 name
屬性的話,就默認(rèn)name
為 default
,等同于 v-slot:default
,也可以縮寫(xiě)為#default
。
注意, v-slot
只能添加在 <template>
上 ,但是也有特殊情況,后面會(huì)講到。
通過(guò) slot
,我們可以在父組件為子組件添加內(nèi)容,但是父子組件的作用域是不同的,我們想在父組件使用子組件的數(shù)據(jù)該怎么辦呢?
可以在子組件 <slot>
元素上綁定屬性,值為你需要傳遞給父組件的內(nèi)容。
// 子組件 組件名稱為 SlotProp <div> <slot name="slot1" :value1="child1"></slot> <slot name="slot2" :value2="child2"></slot> </div> //調(diào)用 <SlotProp> <template v-slot:slot1="slotProps"> {{ slotProps.value1 }} </template> <template v-slot:slot2="slotProps"> {{ slotProps.value2 }} </template> </SlotProp>
簡(jiǎn)單來(lái)說(shuō),就是在 slot
上通過(guò) :key='value'
的形式綁定一個(gè)值,
在父組件調(diào)用時(shí),通過(guò)v-slot:slotName="slotProps"
的形式拿到這個(gè)值,slotProps
名稱可以自己定義,
再通過(guò) slotProps[key]
去拿到這個(gè)值。
如果組件只有一個(gè)默認(rèn)模版的話,是可以不用在 template
上寫(xiě) v-slot:slotName="slotProps"
的,可以直接在組件名稱上寫(xiě) v-slot
<SlotProp v-slot:default="slotProps"> {{ slotProps.value1 }} </SlotProp>
上面提到過(guò),未指定 name
就會(huì)被認(rèn)為是 default
,這里也是同理,v-slot:default="slotProps"
可以簡(jiǎn)寫(xiě)成 v-slot="slotProps"
。
作用域插槽的內(nèi)部工作原理是將你的插槽內(nèi)容包括在一個(gè)傳入單個(gè)參數(shù)的函數(shù)里
基于插槽的實(shí)現(xiàn)原理,我們也可以使用一些 ES6
的語(yǔ)法來(lái)操作 slotProps
,比如解構(gòu),prop重命名和賦默認(rèn)值等。
// 解構(gòu) <SlotProp v-slot="{ value1 }"> {{ value1 }} </SlotProp> // 重命名,將 value1 重命名為 name1 <SlotProp v-slot="{ value1: name1 }"> {{ name1 }} </SlotProp> // 賦默認(rèn)值 <SlotProp v-slot="{ value1 = '這是默認(rèn)值' }"> {{ value1 }} </SlotProp>
slot
支持通過(guò) <template v-slot:[dynamicSlotName]>
這樣的方式來(lái)實(shí)現(xiàn)動(dòng)態(tài)插槽。
有時(shí)在一個(gè)基礎(chǔ)組件中循環(huán)了插入了多個(gè) slot
,比如這樣
<div v-for="item in slotList" :key="item"> <slot :name="item"></slot> </div>
在調(diào)用的時(shí)候就可以使用動(dòng)態(tài)插槽名 + 循環(huán)來(lái)動(dòng)態(tài)渲染相應(yīng)的 slot
<template v-for="item in slotList" v-slot:[item] > {{item}} </template>
關(guān)于“Vue中的插槽是什么及怎么用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“Vue中的插槽是什么及怎么用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。