官方文档：https://v2.cn.vuejs.org/v2/guide/components-slots.html

vue中有3种插槽

1、默认插槽
<slot></slot>
2、具名插槽
<slot name="名称"></slot>
3、作用域插槽

<slot :自定义 name = data 中的属性对象></slot>

1.默认插槽
在子组件中放置一个占位符（slot）

<slot></slot>

export default { 
name:'classList'
}

在父组件中引用这个子组件，并给这个占位符填充内容

<classList>内容</classList>

2.具名插槽
在子组件中有两个地方需要插槽（两个slot）
具名插槽就是给子组件中的插槽取一个名字，而父组件就可以引用子组件的时候，根据名字对号入座，将相对应的内容填充到相对应的插槽中

<slot name="名称"></solt>

在子组件放两个具名插槽
<slot name="one"></slot>
<slot name="two"></slot>
export default {
name:'classList'
}

在父组件中引用该子组件，并通过v-slot:[name]的方式将相对应的内容填充到相应的插槽中

<classList>
  <template v-slot:one>内容</template>
  <template v-slot:two>内容</template>
</classList>

具名插槽的缩写

2.6.0 新增：跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

3.作用域插槽
作用域插槽就是带参数（数据）的插槽，强调的则是数据作用的范围
在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制
slot:自定义name=data中的属性或对象
在子组件中放置一个带参数（数据）的插槽

<slot :isAllwo = "isAllwo"></slot>
export default{
  name:'classList',
  data(){
     return{
       isAllwo:{
         one:'one',
          two:'two'
       }
     }
  }
}

在父组件中引用该子组件，并通过 v-slot 来接受子组件的插槽中传过来的参数和使用该数据

<classList>
<template v-slot="isAllwo">
{{isAllwo.isAllwo.one}}
</template>
</classList>

解构插槽prop

<classList>
<template v-slot="{isAllwo}">
{{isAllwo.one}}
</template>
</classList>