Vue-Cli插槽
1.默认插槽
<!--child为自定义的子组件 要想在父组件对其使用插槽时 子组件一定是双标签 将要插入的值写在里面-->
<child>
<h3>我是标题</h3>
</child>
<!-- 声明位置,用于在调用此组件为双标签时,中间内容显示的位置 -->
<!-- 单个插槽,一个组件只能有一个默认插槽 子组件中添加slot标签会显示父组件插槽的内容 -->
<slot name="default"></slot>
2.具名插槽
<!-- slot 定义插槽名称 vue2.6之前 -- 依次执行显示 都会显示 -->
<h3 slot="header">我是文章标题1</h3>
<h3 slot="header">我是文章标题2</h3>
<!--vue2.6之后写法 它只能写在template中 不能直接写在html标签上 且重复调用只会执行最后一次-->
<template v-slot:header>
<h3>我是文章标题1</h3>
</template>
<template #header>
<h3>!!语法糖:可以用 # 号来代替 v-slot !!</h3>
</template>
<!-- 具名插槽,给slot添加一个名称,名称不能重复 -->
<slot name="header">这里的值会被替换成父组件的值</slot>