vue中插槽的本质是什么?

Bruce7922024-10-13 11:56

vue中slot插槽的本质是函数

默认插槽: 一个名为default的函数
命名插槽: 一个名为插槽名的函数
作用域插槽: 一个带参数的函数

声明一个带有插槽的组件Card

正常写法

xml 复制代码

<template>
    <div>
        <slot name="title"/>
        <slot name="body"/>
        <slot :index="1" username="张三"/>
    </div>
</template>

下面这段代码和上面代码的作用是一样的, 每一个slot标签将来会编译成一个函数, 传递到组件内部.
1. 没有name属性的slot会被编译为一个名为default的无参函数
2. 有name属性的会被编译为一个以name属性值作为函数名的无参函数,
3. 带有其他属性的slot标签会被编译为一个带参函数.

xml 复制代码

<script>
import { h } from 'vue'
export default {
    render() {
        // 在组件内部可以通过this.$slot获取插槽内容
        // 调用具名插槽函数
        const title = this.$slots.title()
        const body = this.$slots.body()
        // 调用默认作用域插槽函数
        const defaults = this.$slots.default({
            index: 1, username: '张三'
        })
        return h('div', {}, [
            defaults,
            title,
            body
        ])
    }
}
</script>

调用一个带有插槽的组件Card

xml 复制代码

<template>
    <div>
        <Card>
            <!-- 会被编译为一个名为title的无参函数const title = ()=>{}, 传递给Card组件-->
            <template #title>
                <h3>这是标题</h3>
            </template>
            <!-- 会被编译为一个名为body的无参函数const body = ()=>{}, 传递给Card组件-->
            <template #body>
                <div>这是段落</div>
            </template>
            <!-- 会被编译为一个名为default的带参函数const default = (args)=>{}, 
            传递给Card组件-->
            <template v-slot="{ index, username }">
                <div>{{ index }}-{{ username }}</div>
            </template>
        </Card>
    </div>
</template>
<script setup>
import Card from './Card.vue'
</script>