(1) 默认插槽：又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
(2) 具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
(3)作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，

可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

子组件：

let Child = {
  template: '#child',
  data() {
    return {
      list: [{
        id: 1,
        name: '网易',
      }, {
        id: 2,
        name: '腾讯',
      }, {
        id: 3,
        name: '优酷',
      }, {
        id: 4,
        name: '搜狐',
      }]
    }
  }
}

根组件：

let vm = new Vue({
  el: '#app',
  data: {},
  components: {
    Child
  }
})

视图层子组件：

1、 :value="item.id"是向父组件传输数组数据

<template id="child">
  <div>
    <p>child子组件</p>
    <slot v-for="item in list" :value="item"></slot>
  </div>
</template>

2、 slot-scope是用来接收子组件传输来的数据

3、取出数据

<div id="app">
  <child>
    <template slot-scope="date">
      <ul>
        <li>{{date.value.id}}</li>
        <li>{{date.value.name}}</li>
      </ul>
    </template>
  </child>
</div>

代码演示：

除了slot-scope来向父组件传输数据，还可以用到v-slot:default和#default用法与slot-scope一致