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 的解釋,覺得形容得很貼切。

zhihu

回答者:彭金金 (GISer)
也附上此篇討論文章的 連結

配合 template 標籤使用

最後,我們在剛才的具名插槽範例中,會看到有些地方使用的標籤是 <template> 而非 <div> 或者 <p> 這類常看到的標籤,
這個標籤跟其他一般的標籤,有什麼差異呢?

差異就在於,使用 <template> 標籤插入的 <slot> 標籤不會被輸出,也不會被顯示出來。

有些時候,我們不希望 HTML 有太多額外的標籤,我們就可以使用 <template> 標籤哩。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。