一、認識插槽Slot

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

二、插槽的基本使用

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

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

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

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

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

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

五、動態(tài)插槽

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

如上圖所示，我們在<slot></slot>中動態(tài)綁定屬性名，該屬性為通過props傳入的，我們在外部，通過v-slot:[na]來動態(tài)綁定屬性。

六、具名插槽的縮寫

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

七、渲染作用域

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

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

八、作用域插槽的案例

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

九、獨占默認插槽縮寫

上面是作用域插槽的完整寫法

下面可以將其改寫為：

也可以改寫為:

十、默認插槽和具名的混合

作用域插槽案例可以改寫為：

總結(jié)

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

最新評論