介紹各種不同的插槽

首先,我們先看看沒有使用插槽的初始狀況。

初始狀況 CodePen Demo

範例中,插入在元件中的內容並非模板 (X-Template) 裡面的內容,因此不會顯示出來,因為元件的內容會全部被模板 (X-Template) 替換掉。

單一個插槽

  • 父層有預設內容:用這段內容取代 Slot
  • 父層沒預設內容:使用 Slot 的內容

使用 Slot 時,如果父層 (app) 裡面有預設內容,則預設內容會取代掉 Slot 的內容;如果沒有預設內容,則會顯示 Slot 提供的內容。

<div id="app">
  <!-- 沒內容:使用預設文字 -->
  <single-slot-component></single-slot-component>
  <!-- 有內容:用這段內容取代 Slot -->
  <single-slot-component>
    <p>使用這段取代原本的 Slot。</p>
  </single-slot-component>
</div>

單一個插槽 CodePen Demo

具名插槽

當我們有大量內容要替換,而且是分布在不同位置的時候,就可以使用具名插槽來處理。

  1. 將 X-Template 模板中想替換的內容改為 <slot> 標籤,並加上 name 屬性與自定義的名稱,像是 <slot name="header">這段是預設的文字</slot>
  2. 在父層 (app) 對應的內容處加上 slot 屬性,並給予一樣的屬性值,像是 <header slot="header">替換的 Header</header>

這樣就能成功以「具名插槽」的方式完成內容的替換囉!

具名插槽 CodePen Demo

另外,前陣子在其他網站上有看到一個對於 Slot 的解釋方法,他是用電腦主機板比喻 Slot 插槽,覺得描述得很貼切,這邊也附上文章的連結

配合 template 標籤使用

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

差異就在於,使用 <template> 標籤插入的 <slot> 標籤不會被輸出,也不會被顯示出來。
有些時候,我們不希望 HTML 有太多額外的標籤,我們就可以使用 <template> 標籤哩。

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