一、什么是插槽？
-
插槽就是子組件中的提供給父組件使用的一個占位符，用<solt></solt>表示，父組件可以在這個占位符中填充任何模板代碼，如HTML、組件等，填充的內(nèi)容會替換子組件的<solt></solt>標簽。
-
代碼
1、在子組件中放一個占位符
子組件.png
2、在父組件中給這個占位符填充內(nèi)容
父組件.png
3、展示效果
效果.png
elements.png
現(xiàn)在來看看，如果給子組件中沒有放插槽，同樣的父組件中在子組件中填充內(nèi)容，會是啥樣的：
1、子組件代碼無插槽
子組件.png
2、父組件照常填充內(nèi)容
父組件.png
3、展示的效果
效果.png
elements.png
-
總結(jié)：如果子組件中沒有使用插槽，父組件如果需要王子組件中填充模板或者HTML，是沒辦法做到的。
二、插槽的使用
（一）插槽的使用-具名插槽
-
描述：具名插槽就是給插槽取個名字。一個子組件可以放多個插槽，而且可以放在不同的地方，而父組件填充內(nèi)容時，可以根據(jù)這個名字把內(nèi)容填充到對方插槽中。
-
代碼
1、子組件的代碼，設(shè)置了兩個插槽（header和footer）
子組件.png
2、父組件填充內(nèi)容，父組件通過v-slot:[name]的方式指定到對應的插槽中。
父組件.png
3、展示的效果
效果.png
elements
接下來再來看看，父組件中填充內(nèi)容的時候，順序調(diào)換下，看下能不能內(nèi)容能不能對應上：
-
子組件代碼不變，父組件代碼中填充順序調(diào)換下(如圖，在父組件中，footer 和 header 的填充位置對換)：
父組件.png
2、展示的效果
展示的效果.png
elements.png
-
總結(jié)：由此看出，即使父組件對插槽的填充的順序打亂，只要名字對應上了，就可以正確渲染到對應的插槽中。即： 父組件填充內(nèi)容時，是可以根據(jù)這個名字把內(nèi)容填充到對應插槽中的
（二）插槽的使用-默認插槽
-
描述：默認插槽就是指沒有名字的插槽，子組件未定義的名字的插槽，腹肌將會把未指定插槽的填充的內(nèi)容填充到默認插槽中。
-
代碼
1、子組件代碼定義了一個默認插槽：
子組件
2、父組件給默認插槽填充內(nèi)容：
父組件
3、展示的效果
展示的效果
-
注意：
1、父級的填充內(nèi)容如果指定到子組件的沒有對應名字插槽，那么內(nèi)容不會被填充到默認插槽中。
2、如果子組件沒有默認插槽，而父級的填充內(nèi)容指定到默認插槽中，那么該內(nèi)容就不會填充到子組件的任何一個插槽中。
3、如果子組件有多個默認插槽，那么父組件所有指定到默認插槽的填充內(nèi)容，將“會” “全都”填充到子組件的每個默認插槽中。（三）插槽的使用-作用域插槽
-
描述：作用域插槽就是帶數(shù)據(jù)的插槽，即帶參數(shù)的插槽，簡單來說就是子組件提供給父組件的參數(shù)，該參數(shù)僅限于插槽中使用，父組件可根據(jù)子組件傳過來的插槽數(shù)據(jù)進行不同的方式展現(xiàn)和填充插槽內(nèi)容。
1、子組件存放一個帶數(shù)據(jù)的插槽
子組件
2、父組件通過“solt-scope”來接收子組件傳過來的插槽數(shù)據(jù)，再根據(jù)插槽數(shù)據(jù)來填充插槽內(nèi)容
父組件
3、展現(xiàn)效果
展示的效果
image.png
