vue中插槽共有几种？及插槽的作用？

　　三种：默认插槽、具名插槽、作用域插槽

　　· 默认插槽

　　默认插槽就是指，的作用类似于占符。

　　//定义一个全局子组件

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>