slot标签是vue提供的，用来占位，用来定义一个插槽
没有名称的slot 是 匿名插槽 | 默认插槽 它会将内容区所有的内容都放在占位的地方
一父传子 father
1.引入子级文件
import 自定义组件名 from 路径
2.components 注册组件名
3.template 插入组件
//例如
<template>
<SlotDemo>内容区</SlotDemo>
</template>
//SlotDemo中可加<template #xx></template>用于传输给具名插槽
//SlotDemo中不加默认全部传输给匿名插槽
4.
<SlotChild :m="msg">
<!-- 组件内容区的东西 被当做是数据 传递到子组件中去了 -->
<em>我是em--{{msg}}</em>
<u>我是u</u>
<!-- 如果使用具名插槽 必须template标签+v-slot -->
<template v-slot:abc>
<p>我是p传递到child中了</p>
</template>
<!-- v-slot:def 简写形式 ： #def -->
<template #def>
<del v-for="it in 5">{{ it }}</del>
</template>
</SlotChild>
child
5.
//匿名插槽
<slot>接受非具名插槽</slot>
// 带名称的插槽 具名插槽
<slot name="abc"></slot>
<slot name="def"></slot>
二子传父 1.传通过自定义属性方式 2.父级组件中#插槽名=子组件传出的键 //（匿名插槽：#default） 3.可以适当的解构
6.
<SlotChild2>
//接收匿名插槽传递过来的数据 #default 表示匿名插槽 默认插槽
<template #default="abc">
<div>我是第一个div</div>
{{ abc }}--{{ abc.person.nickname }}--{{ abc.n }}
</template>
<!-- 具名插槽接收数据 -->
<!-- <template #first="abc">
<p>我是具名插槽的p标签</p>
{{ abc }}--{{ abc.p.name }}
</template> -->
//解构
<template #first="{p: {name, fav}, n2}">
<p>我是具名插槽的p标签</p>
{{ name }}--{{ handleJoin(fav) }}--{{ n2 }}
</template>
</SlotChild>
