插槽（slot）是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時(shí)，把不確定的、希望由用戶指定的部分定義為插槽?？梢园巡宀壅J(rèn)為是組件封裝期間，為用戶預(yù)留的內(nèi)容的占位符。
插槽有三種：匿名插槽，具名插槽和作用域插槽
一、匿名插槽
示例：‘main組件’會(huì)每一個(gè)星期文本后插入，也就是預(yù)留的插槽位
<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>
二、具名插槽
顧名思義，具名插槽就是給插槽一個(gè)名字
如果在封裝組件時(shí)需要預(yù)留多個(gè)插槽節(jié)點(diǎn)，則需要為每個(gè) <slot> 插槽指定具體的name 名稱
示例：
<div id="app">
<main-box>
<!-- template模板標(biāo)簽的順序不影響最終的現(xiàn)實(shí)順序 -->
<!--
指定模板標(biāo)簽插槽的兩種語法
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>
三、作用域插槽
在封裝組件的過程中，可以為預(yù)留的 <slot> 插槽綁定props 數(shù)據(jù)，這種帶有props 數(shù)據(jù)的 <slot> 叫做“作用域插槽”。
可以使用v-slot: 的形式，接收作用域插槽對外提供的數(shù)據(jù)，
作用域插槽對外提供的數(shù)據(jù)對象，可以使用解構(gòu)賦值簡化數(shù)據(jù)的接收過程
示例：
<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>
