插槽（slot）是什么
插槽（slot）是vue提出的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，使得模块分块，具有模块化特质。如果template没有包含一个slot元素，之间的任何内容都会消失。
插槽（slot）的指令
指令为v-slot，它目前取代了slot和slot-scope，插槽内容，vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。
使用插槽（slot）
在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息
插槽主要分为三种
默认插槽，具名插槽，作用域插槽
分别如何使用这三种
默认插槽的使用:
默认插槽：
<slot></slot>
在子组件中定义一个默认插槽：
<template>
<div>
<div class="center">{{ approve }}</div>
</div>
</template>
<script>
export default {
props: {
approve: {
type: String,
required: true,
},
},
};
</script>
在父组件中显示出来：
<template>
<div>
<hmHeader approve="默认插槽">
</div>
</template>
父组件定义要插入到子组件的插槽的内容，并不一定是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。
具名插槽的使用
具名插槽：
<slot name="名称"></slot>
什么叫具名插槽？
就是具有名字的插槽，名字通过属性name来定义,一个组件中可以有很多具名插槽。 在子组件中，定义具名插槽：
<template>
<div>
<div class="left">
<slot name="left">具名插槽1</slot>
</div>
<div class="right">
<slot name="right">具名插槽2</slot>
</div>
</div>
</template>
在父组件中显示出来：
<hmHeader>
<template #left>
具名插槽1
</template>
<template #right>
具名插槽2
</template>
</hmHeader>
作用域插槽的使用
作用域插槽：
<slot :自定义name=data中的属性或对象></slot>
通过上边的默认插槽和具名插槽的使用过程中，发现，基本都是父组件中决定要插入到子组件中的内容，而子组件自行决定插槽的位置。 在子组件中，定义具名插槽：
在子组件中，定义作用域插槽：
<template>
<div class="test_solt">
<p class="title">作用域插槽</p>
<slot :obj='obj'>默认信息</slot>
</div>
</template>
<script>
export default {
data () {
return {
obj: {
msg:'我是msg',
message:'我是message'
}
}
}
}
</script>
在父组件中显示出来：
<template>
<div v-slot="slotProps">
<template>
<div>{{slotProps.obj.msg}}---{{slotProps.obj.message}}</div>
</template>
</div>
</template>
