快捷導(dǎo)航

vue的插槽原來(lái)該這樣理解

更新時(shí)間：2022年02月13日 17:08:28 作者：賣(mài)菜的小白

這篇文章主要為大家詳細(xì)介紹了vue的插槽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

一、認(rèn)識(shí)插槽Slot
二、插槽的基本使用
三、插槽的默認(rèn)內(nèi)容
四、多個(gè)插槽實(shí)現(xiàn)的效果
五、動(dòng)態(tài)插槽
六、具名插槽的縮寫(xiě)
七、渲染作用域
八、作用域插槽的案例
九、獨(dú)占默認(rèn)插槽縮寫(xiě)
十、默認(rèn)插槽和具名的混合
總結(jié)

一、認(rèn)識(shí)插槽Slot

前面我們會(huì)通過(guò)props傳遞給組件一些數(shù)據(jù)，讓組件來(lái)進(jìn)行展示，但是為了讓這個(gè)組件具備更強(qiáng)的通用性，我們不能將組件中的內(nèi)容限制為固定的div、span等等這些元素，比如某種情況下我們使用組件，希望組件顯示的是一個(gè)按鈕，某種情況下我們使用組件希望顯示的是一張圖片，我們應(yīng)該讓使用者可以決定某一塊區(qū)域到底存放什么內(nèi)容和元素。所以有了插槽的存在，我們可以提高組件的復(fù)用性，并且也提高組件的靈活性。

二、插槽的基本使用

直接在其中使用<slot></slot>

在這里插入圖片描述

三、插槽的默認(rèn)內(nèi)容

在這里插入圖片描述

如果想要設(shè)置插槽的默認(rèn)內(nèi)容，可以直接在<slot></slot>標(biāo)簽內(nèi)添加內(nèi)容。

四、多個(gè)插槽實(shí)現(xiàn)的效果

在這里插入圖片描述

如上圖所示，如果在組件之間設(shè)置多個(gè)標(biāo)簽，則會(huì)在該組件的每一個(gè)插槽中都添加多個(gè)標(biāo)簽。

在這里插入圖片描述

如上面代碼所示：在組件中的每一個(gè)<slot></slot>中使用name屬性設(shè)置插槽名，并且組件中間使用template標(biāo)簽并且設(shè)置v-slot:屬性名來(lái)進(jìn)行一一對(duì)應(yīng)。

在這里插入圖片描述

五、動(dòng)態(tài)插槽

有時(shí)候我們的插槽名稱(chēng)不固定，需要從外界傳入，這是就需要使用動(dòng)態(tài)插槽。

在這里插入圖片描述

如上圖所示，我們?cè)?code><slot></slot>中動(dòng)態(tài)綁定屬性名，該屬性為通過(guò)props傳入的，我們?cè)谕獠?，通過(guò)v-slot:[na]來(lái)動(dòng)態(tài)綁定屬性。

六、具名插槽的縮寫(xiě)

在這里插入圖片描述

如上圖所示，具名插槽的v-slot:left可以縮寫(xiě)為#left。

七、渲染作用域

父級(jí)模板的所有內(nèi)容在父級(jí)模板中編譯。
子級(jí)模板的所有內(nèi)容在子集模板中進(jìn)行編譯。

在這里插入圖片描述

如圖所示，父組件中存在title,子組件中也存在title,但是最終顯示的是父組件的title屬性。

八、作用域插槽的案例

在這里插入圖片描述

這里在父組件中的data中設(shè)置數(shù)組數(shù)據(jù)，并將其通過(guò)props傳遞給組件內(nèi)部，子組件拿到數(shù)組后，通過(guò)for循環(huán)遍歷數(shù)組中的每一項(xiàng)內(nèi)容，并且將數(shù)據(jù)通過(guò)v-bind綁定到slot標(biāo)簽上，然后在父組件可以通過(guò)v-slot:default="data",這個(gè)data變量就是數(shù)據(jù)。