如何理解Vue.js的組件中的slot?
官方文檔中這一節看不明白，是否可以解釋一下？
其實我覺得 slot 有點類似面向對象思想中的「多態」。
舉個例子，比如我要實現一個這麼 Alert 組件：
&&
當我們想要有 Success、Warning、Error 等不同樣式和不同內容的 alert 時，我們會希望這樣使用：
&
&
&
&
&
&
&
&
&
要實現這個功能，我們就會用到 slot。
& & 是不是很easy！&
font-weight: bold;
cursor: pointer;
}
.Alert--Success {
color: green;
}
.Alert--Warning {
color: #aa0;
}
.Alert--Error {
color: red;
}
&
&
&
&x&
&
&&
&
&Intel Core i7&
>X980Ti&
&Kingston 32G&
&Samsung SSD 1T&
&
&
就是函數的參數，和props一樣的，寫在不同的地方而已
就我個人而言，我完全是把vue作為web components的一種實現來用的。
https://developer.mozilla.org/en-US/docs/Web/Web_Components
上面是MDN上關於web components的說明。
注意其中shadow dom一節，slot就對應HTMLSlotElement。
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
這篇教程里對slot element有更詳細的說明。
Slots are placeholders inside your component that users can fill with their own markup.看了上面的回答 slot就是 jinja2 或 nunjuncks裡面的 block啊 只不過
1、使用的時候 不需要 引用 {% block xx %} {% endblock %}
2、這個block是有默認的值的Vue使用 slot 特性進行內容分發，我的理解是：
在父組件中放入已被 `slot` 標記的內容，這些內容的順序可以隨意。之後這些內容被分發到子組件的特殊元素 `slot` 中，根據 `name` 屬性在子組件中重新組合。
需要注意的是，內容應該被放在父組件模板中的子組件中：
&
&
&
&
&
one& &
two&
&
&
&
&
&
&
&
&
// 註冊子組件
Vue.component("child", {
template: "&"+
"&
"&
"&
"&
"&"
});
// 初始化父組件
new Vue({
el: "#parent-template"
});
官方api說的slot是用於組件內容分發的，我的理解就是在組件化開發中，雖然組件是一樣的，但是在不同的使用場景組件的一部分內容需要有不同的內容顯示，而這個slot就好比組件開發時定義的一個參數（通過name值來區分），如果你不傳入就當默認值使用，如果你傳入了新的值，那麼在組件調用時就會替換你定義的slot的默認值。以上是我的理解，可能不太準確，做個參考。具體你可以參考官網示例中的模態組件，這個例子就用到slot。
slot就是插槽，就像你要輸入圖片之前，沒有圖片，但是要佔出當前的位置。我是這麼理解的。
正如 @許潛謀 所說的
就是函數的參數
下面我來簡單解釋下
自定義一個組件var HelloWorld = Vue.extend({
template: "#hello-world"
});
對應的模版是(寫在HTML裡面的)
&
&
&
&
是不是跟下面的函數很類似呢？
function helloWorld(hello, world) {
return `&
}
2. 寫上父組件，為了簡單易懂我們讓它的父組件是body
var vm = new Vue({
el: "body",
components: {
"helloWorld": HelloWorld
}
})
3. 在父組件寫上你的自定義組件，其實就是去調用你的函數，並且傳參數給它，看對應的HTML
&
&hello&
&world&
&
其實就是相當於
var hello = "&hello&";
var world = "&world&";
helloWorld(hello, world);
執行之後HTML結構是
&
哪有那麼複雜。。
props可以將數據從父組件傳入子組件，
slot可以將html從父組件傳入子組件。
有看到和函數及函數參數類比的，覺得不能忍，雖然是很久之前的問題了，但文檔還是那個文檔，估計還會有人看完文檔沒太理解吧。
正巧昨天寫了篇專欄，看完應該就能理解：從下拉列表組件開發理解 Slot 和 Scoped Slots。
tldr;
- Slot 是在組件模板中設置的用於在父組件中插入其孫子組件（即自身的子組件）或DOM片段的插槽。
- Scoped Slots 允許在 Slots 中綁定當前組件的數據，然後經由父組件綁定到其孫子組件（即自身的子組件）的 Props 中傳遞給孫子組件（即自身的子組件），或綁定到DOM片段。
其實就是提前占坑，
這是slot_son
&
&
&
&
&
&
&
&
這是 slot_father
&
&
&
&
我是第一個坑&
&
我是第二個坑&
&
&
&
&
import SlotEx from "./slot.vue"
export default {
components:{
SlotEx
}
}
&
比如要去吃飯了，兒子先去佔座，然後等他爹來了再一起吃！
用...用用你就理解了 不然怎麼看都不行。
看看我寫的吧，簡單明了有代碼。
vue--slot個人理解 - 趙晚華 - 博客園
和 WebComponents 的 content 類似，和 http://Asp.Net WebForm 中的 ItemTemplate 之類的也大體相似。
最常見就是table組件。 多少列 每列怎麼顯示？ 是可以通過參數配出來 但是巨TM繁瑣 。 怎麼辦？！ slot！
推薦閱讀：
※與AMD和CommonJS相比，UMD有什麼缺點？
※Vuex應不應該用作頁面組件通信？
※為什麼vue的高仿項目層出不窮，而React和angular卻很少？