目录
1.插槽(slot)是什么？
2.默认插槽(匿名插槽)
使用默认插槽最常见的情况：父组件把内容插入到子组件留下的一个插槽中
如果子组件中有多个默认插槽，父组件中插入一个/多个内容会怎样？
3.具名插槽
使用具名插槽的正常情况示例：
使用具名插槽的时候父组件并未插入任何内容结果会怎样？
4.作用域插槽
1.插槽(slot)是什么？
插槽：简单来说就是在组件的内部留一个或多个空白的位置，可供其他使用它的组件传对应的模板代码进去。插槽让组件复用变的更加灵活了。
在Vue3中，插槽被称为<slot>元素。你可以在组件的模板中使用<slot>元素来声明一个插槽。
2.默认插槽(匿名插槽)
使用默认插槽最常见的情况：父组件把内容插入到子组件留下的一个插槽中
父组件示例：
// parent.vue
<template>
<div class="home">
<son>
<p>我是会被插入子组件插槽位置的默认插槽内容</p>
</son>
</div>
</template>
<script>
import son from '@/components/son.vue'
export default {
components: {
son,
}
}
</script>
子组件示例：
// son.vue
<template>
<div>
<h1>子组件</h1>
<slot></slot> //这里就是子组件插槽的位置，会被替换为父组件的 <p>我是会...内容</p>
</div>
</template>
结果示例：
修改主入口文件：
如果子组件中有多个默认插槽，父组件中插入一个/多个内容会怎样？
父组件示例：
子组件示例：
结果示例：
子组件中每个默认插槽的位置都会被插入父组件插入的所有内容！！！ 
3.具名插槽
实际上，我们希望达到的效果是插槽对应的内容插入显示，这个时候我们就可以使用具名插槽：
-
具名插槽：顾名思义就是给插槽起一个名字，
<slot>元素有一个特殊的属性：name； - 一个不带 name 的插槽slot，会有一个隐含的名字：default；
- 具名插槽在使用时的缩写：实际上，具名插槽在使用时也可以缩写，即v-slot也有缩写，就是把参数之前的所有内容 (即将v-slot:) 替换为字符 # ；
例如：v-slot:header 可以被写为 #header
使用具名插槽的正常情况示例：
父组件示例：
子组件示例：
结果示例：
使用具名插槽的时候父组件并未插入任何内容结果会怎样？
父组件示例：
子组件不变，结果示例：
如果父组件并未插入内容，则显示子组件中插槽自身的默认内容，否则父组件插入的插槽内容覆盖子组件中插槽自身的默认内容。
4.作用域插槽
父组件示例：
子组件示例：
结果示例：
这里是使用vue3组合式写的作用域插槽代码，选项式代码后续有空了再补(可能吧......)，如想使用选项式可以自行更改代码变为选项式写法。
附：本文参考文档(作用域插槽有选项式写法)
