简单来说，当父组件需要在子组件内放一些内容，那么这些内容是显示、不显示、在哪个地方显示、如何显示，通过slot分发显示。
1.slot定义：
// 默认：name="default" 可简写
<slot></slot>
// 定义插槽的名称
<slot name="hedaer"></slot>
2.slot的使用
<div>默认slot</div>
<div slot="header">指定名称的slot</div>
3.案例：
3-1.子组件pagec.vue
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
3-2.使用slot插槽
<template>
<div>
<pagec>
<footer slot="footer">这是底部</footer>
<section >这是内容区域</section>
<header="header">这是头部</header>
</pagec>
</div>
</template>
<script>
// 导入子组件
import pagec from './pagec'
export default {
data(){
return {
}
},
components:{
pagec
}
}
</script>
结果：
这是头部
这是内容区域
这是底部
根据slot定义顺序展示，而非使用时传入顺序
