之前看官方文檔，由於自己理解的偏差，不知道slot是干嘛的，看到小標題，使用Slot分發內容，就以為 是要往下派發內容。然后就沒有理解插槽的概念。其實說白了，使用slot就是先圈一塊地，將來可能種花種菜，也有可能在這塊地上建房子。然而slot可以以一當十，可以插入很多東西。不知明白否？
由於項目經驗有限，這篇我就先跟着官網的知識點走，當然會加入自己的部分項目代碼。
關於slot是這樣說的，
除非子組件模板包含至少一個 <slot> 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片段將插入到 slot 所在的 DOM 位置，並替換掉 slot 標簽本身。
最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。
假定 my-component 組件有下面模板：
|
<div>
<h2>我是子組件的標題</h2>
<slot>
只有在沒有要分發的內容時才會顯示。
</slot>
</div>
|
父組件模版：
|
<div>
<h1>我是父組件的標題</h1>
<my-component>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</my-component>
</div>
|
渲染結果：
|
<div>
<h1>我是父組件的標題</h1>
<div>
<h2>我是子組件的標題</h2>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</div>
</div>
|
除了上述問題，還可以，給出名稱，具名slot。
難點在於作用域插槽的理解：
上面這樣講到，
作用域插槽是一種特殊類型的插槽，用作使用一個（能夠傳遞數據到）可重用模板替換已渲染元素。
在子組件中，只需將數據傳遞到插槽，就像你將 prop 傳遞給組件一樣
<div class="child">
<slot text="hello from child"></slot>
</div>
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>
還有一個就是用於列表組件，允許組件自定義應該如何渲染列表每一項。