Vue 初心者筆記 #19 插槽 (Slot)
之所以元件化，大部分原因就是希望可以重複使用，減少同樣程式碼重複出現。在我們重複使用元件時，如果想要替換部分內容，可以使用插槽來替換元件的部分內容。
本篇文章就來介紹插槽替換 (Slot) 的概念。
介紹各種不同的插槽
首先，我們先看看沒有插槽的初始狀況。
範例中，插入在元件裡面的內容，並非模板 (template) 內的內容，因此不會顯示，元件的內容會全部被模板 (X-Template) 替換掉：
1. 單一個插槽
- 有預設內容：用這段內容取代原本的 Slot
- 沒預設內容：使用 Slot 的內容
使用 Slot 時，如果 app 裡面有預設內容，則預設內容會取代掉 Slot 的內容；如果沒有預設內容，則會顯示 Slot 的內容。
2. 具名插槽
當我們有大量內容要替換，而且是分布在不同位置的時候，我們會使用具名插槽來處理。
首先將 x-template 中想替換的內容改為 <slot> 標籤，並加上 name 屬性與自定義的名稱，像是 <slot name="header">這段是預設的文字</slot>。
接著，將 app 裡對應的內容加上 slot 屬性，並給予一樣的屬性值，像是 <header slot="header">替換的 Header</header>。
這樣就能成功以「具名插槽」的方式完成內容的替換囉！
如果覺得以上文字有點難理解，這裡也有個通俗易懂的解釋。這是在其他網站上看到的一個對於 Slot 的解釋，覺得形容得很貼切。
回答者：彭金金 (GISer)
也附上此篇討論文章的 連結
配合 template 標籤使用
最後，我們在剛才的具名插槽範例中，會看到有些地方使用的標籤是 <template> 而非 <div> 或者 <p> 這類常看到的標籤，
這個標籤跟其他一般的標籤，有什麼差異呢？
差異就在於，使用 <template> 標籤插入的 <slot> 標籤不會被輸出，也不會被顯示出來。
有些時候，我們不希望 HTML 有太多額外的標籤，我們就可以使用 <template> 標籤哩。
以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。