vue 插槽（slot）的使用
插槽----在父组件里面写一段模板内容，能在子组件里面渲染展示
// 父
<div class="parent">
我是父级元素
<ChildPage />
</div>
--------------------
// 子
<template>
我是子级元素
</template>
上面的功能我们通过插槽实现 --- 不在子组件中写内容，完全在父组件里面操作
//
<div class="parent">
我是父级元素
<ChildPage>
<!-- 这里把子组件的文本拿到了父组件这里，在子组件的地方录入 -->
我是子级元素
</ChildPage>
</div>
-----------------
<template>
<!-- 这里的slot就是子组件里面包裹的内容 -->
<slot></slot>
</template>
上面的例子就是插槽的简单使用
子组件里面有多个根元素，需要指定元素，使用插槽
<div class="parent">
我是父级元素
<ChildPage>
<!-- <template v-slot:tar>6666</template> -->
<!-- 下面是一种简写的方式 -->
<!-- #tar 是 v-slot:tar 的简写 这里的tar就是子组件里面slot里面name的名字-->
<template #tar>6666</template>
</ChildPage>
-------------------------
<template>
<header>111</header>
<main>222</main>
<footer>
<!-- name 就是需要定义的给v-slot使用的名字 -->
<slot name="tar">333</slot>
</footer>
</template>
</div>
通过插槽传递子组件的内容到父组件
<div class="parent">
我是父级元素
<ChildPage>
<!-- 这里的slotProp接收slot传递过来的数据 -->
<template v-slot="slotProp">{{slotProp.message}}</template>
</ChildPage>
</div>
-----------------------
<template>
<!-- message就是传递过去的数据，作为对象属性的一个 -->
<slot message="hello"></slot>
</template>
上面是没有定义插槽名字的简单写法，下面介绍有插槽名字且要传递数据
<div class="parent">
我是父级元素
<ChildPage>
<!-- 这里的slotProp接收slot传递过来的数据 -->
<template v-slot:data="slotProp">{{slotProp.message}}</template>
<!-- 简写 -->
<!-- <template #data="slotProp">{{slotProp.message}}</template> -->
</ChildPage>
---------------------------
<template>
<!-- name为定义的插槽名字 -->
<!-- message就是传递过去的数据，作为对象属性的一个 -->
<slot name="data" message="hello"></slot>
</template>
</div>
