Vue Slot 的插槽基本用法

脑子就像手机充电一样，充太饱也不会让手机变快，充不够就後继无力。

今天要介绍的是据说及将会在 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.阿兜哈伯勒！ --> 你真讨人喜欢 ！你好可爱 ！！