快捷導航

vue的插槽原來該這樣理解

更新時間：2022年02月13日 17:08:28 作者：賣菜的小白

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

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

一、認識插槽Slot

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

二、插槽的基本使用

直接在其中使用<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ù)。