[Vue.js] 2.6版本開始使用v-slot取代slot

升級到2.6.0+後，slot的功能有一些更動，以v-slot取代slot，雖然在2.0+仍然可以使用，但確定會在Vue3之後捨棄這個用法，既然如此遲早要學會使用v-slot。

基礎使用

<!-- NavLink.vue -->
<a href="#">
  <slot>Link</slot>
</a>

你可以在模板裡面使用：

<nav-link></nav-link>

會使用 <slot> 內的內容當作預設值顯示。

如果你想要客製內容：

<nav-link>Home</nav-link>

則會取代原本的內容，得到這樣的結果。

<a href="#">
  Home
</a>

未指定 name 這個屬性的情況下，預設的名稱都是 default 。

即將淘汰的slot

1. 命名方式

<!-- NavLink.vue -->
<a href="#">
  <slot name="main">Link</slot>
</a>

2. 使用方式

可以用在任意的元件上，寫入內容：

<nav-link>
  <template slot="main">Home</template>
</nav-link>

<nav-link>
  <h1 slot="main">Home</h1>
</nav-link>

v-slot特性介紹

1. 命名方式

方式不變

2. 使用方式

僅能在 <template> 元件上，寫入內容：

<nav-link>
  <template v-slot:main>Home</template>
</nav-link>

3. 可以縮寫

就像是 v-on: 縮寫成 @ 、 v-bind: 縮寫成 :，v-slot: 可以簡寫成 #，舉例來說，v-slot:header 等同於 #header。

<nav-link>
  <template #main>Home</template>
</nav-link>

除了不能在任意元件是使用 slot ，基本上更動不大，而且更方便好用。不只是 slot 即將走入歷史， slot-scope 是另一個即將被淘汰的用法，想了解更多資訊可以參考官方文件：
https://vuejs.org/v2/guide/components-slots.html