单个插槽
子组件中的插槽，通过
slot标签实现。父组件通过template标签将自定义的内容插入到子组件中。子组件：存在一个mian块的插槽
<template>
<div class="layout">
<div>标题</div>
<div class="main">
<slot></slot>
</div>
</div>
</template>
父组件：
<template>
<div>
<demo-child>
<template>
<div>父组件通过插槽自定义的内容</div>
</template>
</demo-child>
</div>
</template>
多个插槽（具名插槽）
多个插槽的情况下，需要对不同的插槽进行区分（插槽名）
子组件：有三个插槽 header,main,footer
<template>
<div class="layout">
<div class="header">
<slot></slot>
</div>
<div class="main">
<slot></slot>
</div>
<div class="footer">
<slot></slot>
</div>
</div>
</template>
父组件：通过
v-slot:插槽名来进行具名插槽的插入
<template>
<div>
<demo-child>
<template v-slot:header>
<div>头部</div>
</template>
<template v-slot:main>
<div>主体</div>
</template>
<template v-slot:footer>
<div>底部</div>
</template>
</demo-child>
</div>
</template>
父组件：通过
#插槽名来进行具名插槽的插入
<template>
<div>
<demo-child>
<template #header>
<div>头部</div>
</template>
<template #main>
<div>主体</div>
</template>
<template #footer>
<div>底部</div>
</template>
</demo-child>
</div>
</template>
