腦子就像手機充電一樣，充太飽也不會讓手機變快，充不夠就後繼無力。

今天要介紹的是據說及將會在 Vue3 消失的slot，突然覺得寫這篇的意義是什麼！？但是，有那麼多的專案都是以 Vue2 開發出來，也有可能會遇到要維護用 Vue2 寫的專案，所以還是有瞭解的必要。

component slot 的功能

父元件向子元件傳遞「模版的內容」，之前也有提到如何讓父元件向子元件傳遞「資料」，但 Slot 是針對「模版內容」的傳遞。

這一樣圖我們可以看到有三個父元件的模版標籤，且模版標籤裡都有文字內容，在這之前我們遇到很多時後是模版標籤裡是沒有內容的，例如<item-text></item-text>，而如果這些模版標籤理有內容，就必須透過<slot>傳遞過去。<slot>也代表我們預留一塊空的插槽空間在子元件，來放置父元件來的內容。

Slot 的使用位置

<slot>通常使用在子元件的模版中，語法如下：

Vue.component('item-text', {
  template: `
    <div>
      <strong>Say :</strong>
      <slot></slot>
    </div>
  `,
});

而<slot>插槽的內容則是<item-text> Hello ! </item-text>

我們來看一下實作可能會比較清楚 Vue_Base_Slot

我們的目的是要讓子元件裡<slot>的位置可以包含我們在父元件裡標籤模裡<item-text>裡的文字內容，在父元件的 HTML 的 #app 裡，子元件的模版標籤<item-text></item-text>之間插入<slot>預留位置，回到父元件裡的<item-text>標籤內填入我們希望出現的文字內容就可以了。

<div id="app">
  <item-text>Hello !</item-text>
  <item-text>Bonjour !</item-text>
</div>
<script>
// 子元件
Vue.component('item-text', {
  template: `
    <div>
      <strong>Say :</strong>
      <slot></slot>
    </div>
  `,
});
// 父元件
new Vue({
  el:'#app',
  data:{

  }
})
</script>>

這樣出現的結果就會是：
Say : Hello !
Say : Bonjour !

需要注意的是在子元件模版中的<slot></slot>之間通常是空白的，如果在標籤之間加上內容，也就表示如果在父元件裡的模版標籤沒有內容，那麼就會顯示我們在子元件中<slot>之間放的文字內容。如果父元件的模版標籤李有文字內容，那麼原本的內容則會被覆蓋掉。

鐵人賽剩兩天了，賽事結束並不表示學完了，只是表示我們爬上了一個小山丘，或是到達了登山口，接下來還有美麗與嚴峻的風景等著我們！

每日一句法文有益身心：Tu es adorable ! ! --> 舉.A.阿兜哈伯勒！ --> 你真討人喜歡 ！你好可愛 ！！