vue中的插槽slot理解

本篇文章參考賽冷思的個人部落格

1.函式預設傳參

在我們寫js函式我們的可能會給他們乙個預設的引數，寫法是

function
show(age,name)
show(); 
//20,張三
show(18,"命名") //
18,明明

如果使用者不傳入引數，那麼會輸出預設值，如果使用者傳入，會輸出傳入的值，這種寫法很靈活

vue中的元件，也可以有預設的模板，當我們呼叫乙個元件，啥都不傳時，顯示我們定義的預設模板，當我們傳了自定義模板時，就應該使用我們自定義的模板，來替換預設模板，那麼，今天說的slot，其實它就是實現的這個功能，可以理解為函式的傳參。下面以類似官方的例子進行解釋。

現在有個乙個模板 child

當父元件呼叫我時，沒有傳自定義內容時，我就會顯示了，如果傳了自定義內容，我就不顯示了。

slot中的就是預設引數，如果我們不傳入引數

就會被渲染成

當父元件呼叫我時，沒有傳自定義內容時，我就會顯示了，如果傳了自定義內容，我就不顯示了。

如果我們傳入引數

這是我自定義的內容，覆蓋子元件slot中的內容

渲染為

這是我自定義的內容，覆蓋子元件slot中的內容

我們可以看到child中的元素會把模板中的內容改變,就好像我們傳入的引數一樣，所有理解為預設模板

但是可以看到，這種方式過於粗暴，並且只能定義一塊預設內容，不是很方便，所以官方說了，slot還提供了乙個具名功能，意思就是，在子元件定義slot時，加個標識，在父元件呼叫，自定義內容時，也加上標識，這樣就實現了可以在任意地方定義預設內容，下面有請具名slot，其實就是給slot起個名字

預設main

預設footer

上面的是子元件，我們給每乙個slot乙個name屬性，如果是預設值的話，name是沒有什麼作用的，在傳參時，我們可以讓child中的元素，加上slot屬性

自定義底部

自定義main

所以，我們的child最後就被渲染成了

自定義main

自定義底部

在子元件定義slot加個name屬性值，在父元件呼叫時，加上slot屬性，值就是子元件中slot的name屬性值，這樣就會自動定位到對應的slot中，就實現了多個地方定義預設內容。

2023年7月3日更新，最近vue跟新了2.6版本，slot的語法變了，但是整體的作用沒有改變，上面的語法已經廢棄了，新的語法是 slot 和 template+v-slot，需要用的小夥伴去官網檢視新的語法