一、認(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ù)。

九、獨(dú)占默認(rèn)插槽縮寫(xiě)

上面是作用域插槽的完整寫(xiě)法

下面可以將其改寫(xiě)為：

也可以改寫(xiě)為:

十、默認(rèn)插槽和具名的混合

作用域插槽案例可以改寫(xiě)為：

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

最新評(píng)論