Vue 3：如何使用渲染函数来渲染不同的组件，这些组件本身渲染具有插槽、事件等的不同组件？

Question

标题基本上是我的问题。但是下面的代码应该更清楚我的目标是什么。

我有一个版本：

// AppItem.vue
<script>
import { h } from 'vue'

import { AppItem1 } from './item-1';
import { AppItem2 } from './item-2';
import { AppItem3 } from './item-3';

const components = {
    AppItem1,
    AppItem2,
    AppItem3,
};

export default {
    props: {
        level: Number
    },
    render() {
        return h(
            components[`AppItem${this.level}`],
            {
                ...this.$attrs,
                ...this.$props,
                class: this.$attrs.class + ` AppItem--${this.level}`,
            },
            this.$slots
        )
    }
}
</script>

---

// AppItem1.vue
<template>
    <AppBlock class="AppItem--1">
        <slot name="header">
            #1 - <slot name="header"></slot>
        </slot>
        <slot></slot>
    </AppBlock>
</template>

---

// AppItem2.vue
<template>
    <AppBlock class="AppItem--2">
        <template #header>
            #2 - <slot name="header"></slot>
        </template>

        <slot></slot>
    </AppBlock>
</template>

---

// AppBlock.vue
<template>
    <div class="AppBlock">
        <div class="AppBlock__header">
            <slot name="header"></slot>
        </div>
        <div class="AppBlock__body">
            <slot></slot>
        </div>
    </div>
</template>

我的目标是使用 <AppItem> 就像...

<AppItem level="1">
    <template #header>
        Animal
    </template>

    <AppItem level="2">
        <template #header>
            Gorilla
        </template>
        <p>The gorilla is an animal...</p>
    </AppItem>

    <AppItem level="2">
        <template #header>
            Chimpanzee
        </template>
        <p>The Chimpanzee is an animal...</p>
    </AppItem>
</AppItem>

...并让它呈现为...

<div class="AppBlock AppItem AppItem--1">
    <div class="AppBlock__header">
        Animal
    </div>

    <div class="AppBlock__body">

        <div class="AppBlock AppItem AppItem--2">
            <div class="AppBlock__header">
                Gorilla
            </div>

            <div class="AppBlock__body">
                <p>The gorilla is an animal...</p>
            </div>
        </div>

        <div class="AppBlock AppItem AppItem--2">
            <div class="AppBlock__header">
                Chimpanzee
            </div>

            <div class="AppBlock__body">
                <p>The Chimpanzee is an animal...</p>
            </div>
        </div>
    </div>
</div>

为什么它不起作用？我误会了什么？

Answer 1

您当前实现的问题是 AppItem 组件正在尝试使用 render() 函数动态呈现子组件，但它没有将正确的数据传递给子组件。具体来说，它没有将插槽数据传递给子组件，这导致 #header 和其他插槽无法正确呈现。

这是 AppItem 组件的更新版本，应该可以按预期工作：

// AppItem.vue
<script>
import { h } from 'vue'

import AppItem1 from './item-1';
import AppItem2 from './item-2';
import AppItem3 from './item-3';

const components = {
    AppItem1,
    AppItem2,
    AppItem3,
};

export default {
    props: {
        level: Number
    },
    render() {
        const component = components[`AppItem${this.level}`];
        const scopedSlots = {};
        Object.keys(this.$scopedSlots).forEach(key => {
            scopedSlots[key] = () => this.$scopedSlots[key](this.$attrs)
        });
        return h(
            component,
            {
                ...this.$attrs,
                ...this.$props,
                class: this.$attrs.class + ` AppItem--${this.level}`,
                scopedSlots,
            },
            this.$slots
        )
    }
}
</script>

此版本的 AppItem 组件使用 scopedSlots 属性将正确的插槽数据传递给子组件，这允许正确呈现 #header 和其他插槽。此外，该组件使用 this.$scopedSlots 对象来确保将正确的作用域插槽传递给子组件。

您可以通过以下方式使用此组件：

<template>
  <div>
    <AppItem level="1">
        <template #header>
            Animal
        </template>

        <AppItem level="2">
            <template #header>
                Gorilla
            </template>
            <p>The gorilla is an animal...</p>
        </AppItem>

        <AppItem level="2">
            <template #header>
                Chimpanzee
            </template>
            <p>The Chimpanzee is an animal...</p>
        </AppItem>
    </AppItem>
  </div>
</template>

它现在应该正确呈现所需的输出。