插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
插槽有三种：匿名插槽，具名插槽和作用域插槽
一、匿名插槽
示例：‘main组件’会每一个星期文本后插入，也就是预留的插槽位
<div id="app">
<main-box>星期一</main-box>
<main-box>星期二</main-box>
<main-box>星期三</main-box>
</div>
<script>
Vue.component('mainBox',{
template:`
<div>
<p>main组件</p>
<slot></slot>
</div>
`
})
const app=new Vue({
el:'#app',
data:{
},
methods:{
},
mounted(){
}
})
</script>
二、具名插槽
顾名思义，具名插槽就是给插槽一个名字
如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的name 名称
示例：
<div id="app">
<main-box>
<!-- template模板标签的顺序不影响最终的现实顺序 -->
<!--
指定模板标签插槽的两种语法
1.slot="插槽名"
2.v-slot:插槽名
-->
<template slot="bottom">
<h4>星期一</h4>
<h5>星期二</h5>
</template>
<template slot="top">
<h4>星期三</h4>
<h5>星期四</h5>
</template>
</main-box>
</div>
<script>
Vue.component('mainBox',{
template:`
<div class="box">
<p>main组件</p>
<slot name="top"></slot>
<slot name="bottom"></slot>
</div>
`
})
const app=new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
三、作用域插槽
在封装组件的过程中，可以为预留的 <slot> 插槽绑定props 数据，这种带有props 数据的 <slot> 叫做“作用域插槽”。
可以使用v-slot: 的形式，接收作用域插槽对外提供的数据，
作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程
示例：
<div id="app">
<box>
<template v-slot="scope">
<h3>尝试使用box组件中的msg</h3>
<h1>{{scope.abc}}</h1>
</template>
</box>
</div>
<script>
Vue.component('box',{
template:`
<div class="box">
<h3>title</h3>
<slot :abc="msg"></slot>
</div>
`,
data:function(){
return {
msg:'box组件的msg'
}
}
})
const app=new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
