前言
vue插槽在开发中用到，这里做一个梳理。
- slot标签 内置组件 可以理解为占位符，最后被替换为内容。(子组件中使用)
- v-slot指令 该指令仅限于
template组件和自定义组件中使用。（父组件中使用） - 插槽：普通插槽、具备后备内容插槽、具名插槽、作用域插槽
一、普通插槽
将slot标签作为占位符。
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");
最终渲染结果为
<div class="child">普通插槽</div>
二、具备后备内容插槽
如果父组件没有定义插槽，就会显示默认的内容。
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");
最终渲染结果为
<div class="child">后备内容</div>
三、具名插槽
可以通过定义名称来区别插槽
let baseChild = `<div class="child">
<slot name="header"></slot>
<slot>默认插槽，匹配不到就取这个</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");
最终渲染结果为
<div class="child">
<span>header</span>
<span>匿名插槽</span>
<span>footer</span>
</div>
注意：元素布局顺序最终以子组件为主。
parent组件(header,footer,匿名)，child组件(header,匿名,footer)，最终渲染结果为子组件的顺序。
1.具名插槽的简写
<template v-slot:header></template>
可以简写成以下写法
<template #header></template>
2.动态插槽名
<template v-slot:[slotName]></template>
四、作用域插槽
作用域插槽可以实现组件通信。子组件的变量，父组件的插槽里面可以使用。
语法
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>
最终渲染结果为
<div class="son base-slot">
<div>
名字：banana
</div>
<div>
年龄：18
</div>
</div>
插槽.jpg
