插槽分为匿名插槽、具名插槽、作用域插槽，父组件决定渲染内容，子组件决定渲染位置。插槽的数据作用域是在父组件。
匿名插槽
父组件中使用子组件，并在子组件标签中间插入值，如果子组件中有对应插槽则在子组件标签中间插入的值就会器作用
//父组件
<div>
<div>这里是父组件</div>
<son>
这个内容就是插槽的内容
</son>
</div>
//子组件
<div>这里是自组件</div>
<slot></slot>
//slot就代表插槽，就会将父组件中<son>标签中的内容显示出来
//如果子组件中没有使用插槽标签，则父组件的<son>标签中的内容就不会显示
具名插槽
是指父组件在调用子组件时，父组件给子组件中加入的插槽，在子组件中可以多次重复调用，但是不可避免的父组件可能给子组件多个不同作用的插槽就需要加入name进行区别，子组件在什么情况下使用父组件给的哪个内容。
<div>
<div>这里是父组件</div>
<son>
<p slot='header'>
这个内容就是插槽的内容
</p>
</son>
<son>
<p slot='main'>
这个内容就是插槽的内容
</p>
</son>
</div>
//子组件
<div>这里是自组件</div>
<slot name='header'></slot>
<slot name='main'></slot>
其中注意slot的名字是在子组件标签内部，不可以在son标签中。
在父组件中slot='header'还可以使用v-slot来代替，可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
<div>
<div>这里是父组件</div>
<son>
<template v-slot:header>
这个内容就是插槽的内容
</template>
</son>
<son>
<p slot='main'>
这个内容就是插槽的内容
</p>
</son>
</div>
//子组件
<div>这里是自组件</div>
<slot name='header'></slot>
<slot name='main'></slot>
注意v-slot只可以在template中使用，在其他标签上使用会报错。
作用域插槽
<div>
<div>这里是父组件</div>
<son>
<p slot='header'>
这个内容就是插槽的内容{{app}}
</p>
</son>
<son>
<p slot='main'>
这个内容就是插槽的内容
</p>
</son>
</div>
//子组件
<div>这里是自组件</div>
<slot name='header'>{{app}}</slot>
<slot name='main'></slot>
//其中app是父组件的data中定义的属性。其中也可以对数据进行双向绑定
