Vue中slot的理解與實際應用

最近重新回歸了前端開發，在開發過程中發現在元件封裝過程中slot使用頻率相當的高，像比較主流的element ui也是提供了不少的插槽來幫助使用者來更靈活的開發，本著學習知識以及和大家一起共同提高的態度，把自己對於slot元件的理解寫成文章和大家一起分享。

如果對於slot的基本概念已經十分了解了，可以跳過該段落，如果你不是很確定，建議讀完本段落。

語法比較簡單，通過子元件中新增 | **塊並且在父元件呼叫過程中使用預設插槽或者具名插槽來增加或者替換預設插槽內容。詳情見官網。

我理解的插槽是父子元件關係中，插槽在子元件中展示位置以及展示內容的操作手段，父元件決定展示內容，子元件決定展示位置。不理解？繼續往下走走：

子元件layout.js

>
>
name
="header"
:header
="headername"
>
slot
>
>
slot
>
name
="footer"
>
slot
>
div>
template
>
>
export
default}}
script
>

父元件home.js

>
>
v-slot:header
="props"
>
}template
>
>
i am the main content.template
>
slot
="footer"
>
this is the footer.template
>
layout
>
template
>

上述案例，含括了插槽的的所有基本概念：匿名插槽、具名插槽以及引數傳值，引數傳值的實際應用後面會具體分析。解析後的內容會按照header,default,footer的順序依次展示。可見元件中footer、header展示的位置是由子元件自己定義的，但是展示的具體內容，則是由父元件進行設定並傳遞到子元件。

實戰應用一：element ui元件解析

實戰應用，我們一起來分析一下element ui中的table元件。table的table column提供了兩個插槽供使用者使用，分別是：

雖然不清楚他內部是如何實現的，但是根據元件的使用可以了解到，他預設提供了乙個table 表頭以及列內容的展示，通過新增header或者default來替換之前已有的表頭或者列內容。

來看一下實際使用並結合起來進行分析：

>
:data
="tabledata"
style
="width
: 100%
" max-height
="250"
>
prop
="zip"
label
="郵編"
width
="120"
>
el-table-column
>
fixed
="right"
label
="操作"
width
="120"
>
v-slot
="scope"
>
@click.native.prevent
="deleterow(scope.$index, tabledata)"
type
="text"
size
="small"
>
移除el-button
>
template
>
el-table-column
>
el-table
>
template
>

這裡在使用table元件時，預設他會根據prop來逐行讀取tabledata中的資料。正常情況下，這裡如果新增乙個是無法讀取到傳遞給當前table column的行內容的，通過給table column新增slot-scope來完成default插槽的替換，來完成自定義內容，上述**完成了根據當前行的索引值完成當前行內容的刪除功能。

實戰應用二：專案元件封裝

專案在實際過程中，往往需要對element ui等開源元件進行二次封裝，比如現在要求實現乙個動態展示table資訊的元件，要求讀取type屬性來展示不同元件，且可以讀取陣列長度完成完整內容的展示。

首先分析，需求不是很複雜，通過參照實戰應用一，新增v-for迴圈，動態讀取配置引數，然後在預設插槽中完成內容的判斷以及展示。

>
v-for
="(item, index) in tablecolumntemp"
:key
="index"
>
v-slot
="slotprops"
>
:name
="item.prop"
:datarow
="slotprops.row"
>
v-if
>
time-picker
>
v-else-if
/>
<...
v-else-if
>
...>
v-else
>
component
>
slot
>
template
>
fks-table-column
>
fks-table
>

通過上述分析，可以看到實現起來也是很簡單的，值得注意的是，在中還新增了一層繫結了name屬性的具名插槽，這裡是提供給了元件呼叫的使用者更佳的靈活性，通過對應到相關的具名插槽，可以重寫元件預設實現的內容。

Vue中slot的理解與實際應用

Vue中slot初理解

vue中的插槽slot理解

深入理解vue中的slot與slot scope

Vue中slot的理解與實際應用

Vue中slot初理解

vue中的插槽slot理解

深入理解vue中的slot與slot scope

相關推薦