什么是插槽？

插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽。

如下代碼：

1. 在子組件中放一個占位符

?

2.?在父組件中給這個占位符填充內容：

?

3.?展示的效果

現在來看看，如果子組件中沒有放插槽，同樣的父組件中在子組件中填充內容，會是啥樣的：

1. 子組件代碼無插槽：

2. 父組件照常填充內容：

?

?

3.?展示的效果：

?

?

總結：如果子組件沒有使用插槽，父組件如果需要往子組件中填充模板或者html, 是沒法做到的

?

插槽的使用

插槽的最最簡單使用，上面已有例子，這里就不寫了，接下來看看，插槽其他使用場景

插槽的使用 - 具名插槽

描述：具名插槽其實就是給插槽娶個名字。一個子組件可以放多個插槽，而且可以放在不同的地方，而父組件填充內容時，可以根據這個名字把內容填充到對應插槽中。

如下代碼：

1.?子組件的代碼，設置了兩個插槽(header和footer)：

?

2.?父組件填充內容,?父組件通過 v-slot:[name] 的方式指定到對應的插槽中

?

3.展示的效果：

?

?

?

接下來再來看看，父組件中填充內容的時候，順序調換下，看下能不能內容能不能對應上：

1. 子組件代碼不變，父組件代碼中填充順序調換下(如圖，在父組件中，footer 和 header 的填充位置對換)：

?

2.?展示的效果：

?

?　　由此看出，即使父組件對插槽的填充的順序打亂，只要名字對應上了，就可以正確渲染到對應的插槽中。即：?父組件填充內容時，是可以根據這個名字把內容填充到對應插槽中的

插槽的使用 - 默認插槽

描述： 默認插槽就是指沒有名字的插槽，子組件未定義的名字的插槽，父級將會把 未指定插槽的填充的內容填充到默認插槽中。

示例代碼如下：
1.子組件代碼定義了一個默認插槽：

?

?　　2.父組件給默認插槽填充內容：

　　

?

?　　3. 展現的內容

　　

?

注意：

1.? 父級的填充內容如果指定到子組件的沒有對應名字插槽，那么該內容不會被填充到默認插槽中。

2.? 如果子組件沒有默認插槽，而父級的填充內容指定到默認插槽中，那么該內容就“不會”填充到子組件的任何一個插槽中。

3.? 如果子組件有多個默認插槽，而父組件所有指定到默認插槽的填充內容，將“會” “全都”填充到子組件的每個默認插槽中。

?

　　

　　插槽的使用 - 作用域插槽

　　　　作用域插槽的概念和使用比較難于理解，通過查看多方資料，做了以下的總結：

描述：作用域插槽其實就是帶數據的插槽，即帶參數的插槽，簡單的來說就是子組件提供給父組件的參數，該參數僅限于插槽中使用，父組件可根據子組件傳過來的插槽數據來進行不同的方式展現和填充插槽內容。
使用方法:

子組件存放一個帶數據的插槽: mylist和title是子組件傳給父組件的參數

父組件通過 “slot-scope” 來接收子組件傳過來的插槽數據，再根據插槽數據來填充插槽的內容

展現的效果：

常用場景（以下為常用的情況之一）
如果子組件中的某一部分的數據，每個父組件都會有自己的一套對該數據的不同的呈現方式，這時就需要用到作用域插槽。

總結

以上是生活随笔為你收集整理的工作总结5：插槽的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。