vue插槽

前言

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