一、默认插槽
1.父组件中没有填坑内容时
在子组件中用slot占个位置
<template>
<div>子组件:
<slot>父组件中没有填坑内容时的默认展示</slot>
</div>
</template>
父组件：Children中没有填坑内容
<template>
<div>
<Children></Children>
</div>
</template>
结果：
2.父组件中有填坑内容
<template>
<div>
<Children>填坑内容</Children>
</div>
</template>
此时子组件中的默认展示内容则会自动变为父组件中的填坑内容
结果：
二、具名插槽
为子组件中的坑取名字
<template>
<div>子组件:
<!-- 有名字的坑 -->
<slot name="one">one，默认内容</slot>
<slot name="two">two，默认内容</slot>
</div>
</template>
父组件中填坑时在template中用v-slot:名字，为每个坑填上内容（tips：v-slot：可简写为#，eg：#one）
<template>
<div>
<Children>
<template v-slot:one>
<div>one的内容</div>
</template>
<template v-slot:two>
<div>two的内容</div>
</template>
</Children>
</div>
</template>
结果：
三、作用域插槽
作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据进行不同的展现和填充内容。在标签中用slot-scope或者v-slot来接受数据
子组件：
<template>
<div>
<div>子组件：</div>
<ul>
<li v-for="(item,index) in items" :key="index">
<slot :slotItem="item"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
items:['lihua','wangwu','zengyi','wangmei']
}
}
}
</script>
父组件：
<template>
<div>
<Children>
<!-- <template v-slot="a">
<p>{{a.slotItem}}</p>
</template> -->
<template slot-scope="a">
<p>{{a.slotItem}}</p>
</template>
</Children>
</div>
</template>
如果slot有name的话，父组件中slot-scope=“a”则要改为v-slot：name=‘a’或#name=‘a’
结果：
