具名插槽和匿名插槽從頭再學Vue之slot插槽

在vue中提供了乙個內建元件：「slot」，官方稱之為「插槽」。其作用主要是為了做內容分發。內容分發這個詞理解起來可能不太直觀，如果學習過angular，就可以將它理解為angular中的ng-content，ng-content的解釋是「內容投影」，就將內容投影到元件的ng-content中。slot和它的作用是一樣的。

在官方中給出了通過插槽分發內容的例子。

首先定義乙個元件，在元件模板中使用「slot」標記插槽在模板中的位置：

vue.component('alert-box', )使用自定義元件：

」作為內容被分發到自定義元件中的「slot」處，效果如下：

這樣我們就通過使用「slot」完成了內容分發。

slot的應用場景有很多，如通過slot實現統一的布局、結構、效果等。在 element ui中就有許多使用slot的元件。如表單中的formitem：

}}在formitem元件中，使用到了3個slot，從上而下它們的作用分別是：

在formitem的例子中，發現在slot中使用到了name屬性。name是用來命名插槽的。在模板中通過name來區分多個插槽。

要實現上面的效果，就可以使用具名插槽：

不帶name屬性的插槽，會帶有隱含的名字「default」。使用如下：

a paragraph for the main content.and another one.here's some contact info渲染效果如下：

a paragraph for the main content.and another one.here's some contact info

具名插槽的使用時的v-slot可以縮寫為：

a paragraph for the main content.and another one.here's some contact info在實際開發過程中，很多時候需要將元件內的資料通過slot的方式提供給外部使用，此時，就是通過slot屬性的方式將資料傳遞到元件外：current-user

使用時：

只有預設插槽時，我們可以對上面的使用方式進行簡化：

不帶引數的slot預設為default，所以還可以簡化為：

在es中，提供了物件解構功能，所以我們也可以使用解構的方式來處理slot：

此處可以理解為：

let  = slotprops

通過解構的方式，將slotprops的user屬性提取出來。

「slot」的內容分發功能，可以幫助開發者更加方便的實現布局結構元件化的復用。同樣也是開發者高階的乙個標誌。

具名插槽和匿名插槽從頭再學Vue之slot插槽

具名插槽和匿名插槽 vue 插槽

元件插槽匿名插槽具名插槽

v slot匿名插槽具名插槽及作用域插槽

具名插槽和匿名插槽 從頭再學Vue之slot插槽

具名插槽和匿名插槽 vue 插槽

元件 插槽 匿名插槽 具名插槽

v slot匿名插槽 具名插槽及作用域插槽

相關推薦

具名插槽和匿名插槽從頭再學Vue之slot插槽

元件插槽匿名插槽具名插槽

v slot匿名插槽具名插槽及作用域插槽