元件插槽 Slot

我們會將需要重複使用的區塊建立成元件，這樣可以方便我們重複使用，但是如果遇到我需要替換部份內容的時候，該怎麼辦呢？難道要再新建一個元件嗎？答案是不需要的，如果要替換掉某些內容的話，可以使用 slot 來替換，現在就讓我們來看範例：

<div id="app">
  <no-slot></no-slot>
</div>

<script type="text/x-template" id="noSlot">
  <div>
    <h2>Component</h2>
    <p>沒有插槽</p>
  </div>
</script>

Vue.component('no-slot', {
    template: '#noSlot'
})

首先是沒有使用 slot 的樣版，這裡顯示的畫面應該可以想像得到了，但是如果我在元件內部又加入新的內容呢？

<div id="app">
  <no-slot>新增的內容</no-slot>
</div>

加入的新內容並不會顯示出來唷！但是如果有使用 slot 的話又會怎麼樣呢？

<div id="app">
  <single-slot>
    <p>有使用 slot 就可以插入新的內容。</p>
  </single-slot>
</div>

<script type="text/x-template" id="singleSlot">
  <div>
    <h2>Component</h2>
    <slot>如果沒有 slot ，內容顯示這裡</slot>
  </div>
</script>

Vue.component('single-slot', {
    template: '#singleSlot'
})

這裡的結果你會看到，我們元件內的 slot 標籤的內容被我新增的段落的內容給替換掉了，但是如果有使用到 slot 卻沒有要插入新的內容又會怎麼樣呢？其實，如果是這樣的話，那就會顯示 slot 的內容唷！
那如果內容有很多要替換的話，該怎麼準確的替換掉正確的內容呢？來看下面範例：

<div id="app">
  <name-slot>
    <h3 slot="head">替換掉的內容</h3>
  </name-slot>
</div>


<script type="text/x-template" id="nameSlot">
  <div>
    <h2>Component</h2>
    <p>一個段落</p>
    <slot name="head">一個 H3</slot>
    <h4>一個 H4</h4>
  </div>
</script>

Vue.component('name-slot', {
    template: '#nameSlot'
})

這裡可以看到，我們可以給要被替換的 slot 的內容一個 name 的屬性，並且在要替換的內容上給一個 slot 的屬性，兩者的值都給 head ，這樣就能成功替換掉正確的內容了，而 head 是自定義的名稱，接下來你可以試著將元件的內容全部換成 slot 標籤，並且嘗試自己替換掉正確的內容唷！

那麼，明天再見囉！