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>
標籤哩。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。