三種：默認插槽、具名插槽、作用域插槽

　　· 默認插槽

　　默認插槽就是指，的作用類似于占符。

　　//定義一個全局子組件

Vue.component('child', {

  template: '<div><slot></slot></div>',

});

var vm = new Vue({

  el: '#root',

});

<!--引用child組件-->

<div id="root">

  <child>

    <span>我是占位符</span>

  </child>

</div>

　　上述的子組件 child 里定義的 slot 被 span 標簽給代替了，如果子組件里沒有定義 slot，則 span 標簽會被直接忽略，且一個子組件里只能定義一個單個插槽。

　　· 具名插槽

　　可以通過設置 name 屬性，指定顯示的位置

　　定義一個 組件：

<div class="container">

  <header>

    <slot name="header"></slot>

  </header>

  <main>

    <slot></slot>

  </main>

  <footer>

    <slot name="footer"></slot>

  </footer>

</div>

<base-layout>

  <template v-slot:header>

    <h1>Here might be a page title</h1>

  </template>

  <p>A paragraph for the main content.</p>

  <p>And another one.</p>

  <template v-slot:footer>

    <p>Here's some contact info</p>

  </template>

</base-layout>

　　· 作用域插槽

　　父組件替換插槽標簽，但是內容由子組件來提供

<div class="container">

  <header>

    <slot name="header"></slot>

  </header>

  <main>

    <slot></slot>

  </main>

  <footer>

    <slot name="footer"></slot>

  </footer>

</div>

<base-layout>

  <template v-slot:header>

    <h1>Here might be a page title</h1>

  </template>

  <p>A paragraph for the main content.</p>

  <p>And another one.</p>

  <template v-slot:footer>

    <p>Here's some contact info</p>

  </template>

</base-layout>