三種：默認(rèn)插槽、具名插槽、作用域插槽

　　· 默認(rèn)插槽

　　默認(rèn)插槽就是指，的作用類似于占符。

　　//定義一個(gè)全局子組件

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 標(biāo)簽給代替了，如果子組件里沒有定義 slot，則 span 標(biāo)簽會(huì)被直接忽略，且一個(gè)子組件里只能定義一個(gè)單個(gè)插槽。

　　· 具名插槽

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

　　定義一個(gè) 組件：

<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>

　　· 作用域插槽

　　父組件替換插槽標(biāo)簽，但是內(nèi)容由子組件來提供

<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>