前言
vue插槽在開發(fā)中用到峭咒，這里做一個梳理。
- slot標(biāo)簽 內(nèi)置組件 可以理解為占位符纪岁，最后被替換為內(nèi)容凑队。(子組件中使用)
- v-slot指令 該指令僅限于
template組件和自定義組件中使用。（父組件中使用） - 插槽：普通插槽幔翰、具備后備內(nèi)容插槽漩氨、具名插槽西壮、作用域插槽
一、普通插槽
將slot標(biāo)簽作為占位符叫惊。
let baseChild = `<div class="child"><slot></slot></div>`;
let parent = new Vue({
components:{
baseChild
},
template: `<div id="app"><base-child>普通插槽</base-child></div>`
}).$mount("#app");
最終渲染結(jié)果為
<div class="child">普通插槽</div>
二款青、具備后備內(nèi)容插槽
如果父組件沒有定義插槽，就會顯示默認(rèn)的內(nèi)容赋访。
let baseChild = `<div class="child"><slot>后備內(nèi)容</slot></div>`;
let parent = new Vue({
components:{
baseChild
},
template: `<div id="app"><base-child></base-child></div>`
}).$mount("#app");
最終渲染結(jié)果為
<div class="child">后備內(nèi)容</div>
三可都、具名插槽
可以通過定義名稱來區(qū)別插槽
let baseChild = `<div class="child">
<slot name="header"></slot>
<slot>默認(rèn)插槽，匹配不到就取這個</slot>
<slot name="footer"></slot>
</div>`;
let parent = new Vue({
components:{
baseChild
},
template: `<div id="app">
<base-child>
<template v-slot:header><span>header</span></template>
<template v-slot:footer><span>footer</span></template>
<template>匿名插槽</template>
</base-child>
</div>`
}).$mount("#app");
最終渲染結(jié)果為
<div class="child">
<span>header</span>
<span>匿名插槽</span>
<span>footer</span>
</div>
注意：元素布局順序最終以子組件為主蚓耽。
parent組件(header,footer,匿名)渠牲，child組件(header,匿名,footer)，最終渲染結(jié)果為子組件的順序步悠。
1.具名插槽的簡寫
<template v-slot:header></template>
可以簡寫成以下寫法
<template #header></template>
2.動態(tài)插槽名
<template v-slot:[slotName]></template>
四签杈、作用域插槽
作用域插槽可以實現(xiàn)組件通信。子組件的變量鼎兽，父組件的插槽里面可以使用答姥。
語法
v-slot:[slotName]="props"
這個例子中，選擇將包含所有插槽 prop 的對象命名為 props谚咬，但也可以使用任意喜歡的名字鹦付。
子組件
<template>
<div class="son">
<slot name="main" :user="user"></slot>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
data(){
return{
user:{
name:"banana",
age:18
}
}
}
})
</script>
父組件
<template>
<div>
<!-- 作用域插槽 -->
<div class="parent">
<base-slot class="base-slot">
<template #main="props">
<div>
名字：{{props.user.name}}
</div>
<div>
年齡：{{props.user.age}}
</div>
</template>
</base-slot>
</div>
</div>
</template>
<script lang="ts">
import baseSlot from "./base-slot.vue"
import Vue from 'vue'
export default Vue.extend({
components:{
baseSlot
},
})
</script>
最終渲染結(jié)果為
<div class="son base-slot">
<div>
名字：banana
</div>
<div>
年齡：18
</div>
</div>
插槽.jpg
