vue3 渲染函数怎么直接当做组件使用?

Question

vue3 渲染函数怎么直接当做组件使用

export function useNestComponents(cmps: INestCmp[]) {
    const createCmp = (index: number): VNode  => {
        if (index === cmps.length - 1) {
            return h(cmps[index].component, cmps[index].props || null);
        } else {
            return h(cmps[index].component, cmps[index].props || null, createCmp(index + 1))
        }
    }
    return createCmp( 0);
}

<script lang="ts" setup>
const AppProvider = useNestComponents([
    {
        component: NConfigProvider
    },
    {
        component: NNotificationProvider,
    },
    {
        component: NMessageProvider
    },
])
</script>

<template>
    <AppProvider>3123123</AppProvider>
</template>

AppProvider 应当渲染3个组件出来的， 但是只渲染了一个出来。

如果 AppProvider 用函数式组件写， 3个组件都可以渲染出来。 但是 AppProvider 里面的内容久渲染不出来

import { useNestComponents } from './hooks/component';
const AppProvider = useNestComponents([
    {
        component: NConfigProvider
    },
    {
        component: NNotificationProvider,
    },
    {
        component: NMessageProvider
    },
])

export default {
    setup() {
        return () => AppProvider
    }
}

Answer 1

export function useNestComponents(cmps: INestCmp[]) {
    const nestComponent = (props, ctx) => {
        const createCmp = (index: number): VNode => {
            if (index === cmps.length - 1) {
                return h(cmps[index].component, cmps[index].props || null, ctx.slots.default && ctx.slots.default()); // Directly return VNode here
            } else {
                return h(cmps[index].component, cmps[index].props || null, createCmp(index + 1));
            }
        }
        const vnodes = createCmp(0);
        return h('div', props, vnodes);
    }
    return nestComponent;
}

在最后一个组件里面操作插槽， 就能渲染了。另外 h 函数的第一个传参不能是vnode。 所以会而外新增一个div标签

Answer 2

试试这样

<script lang="ts" setup>
const AppProvider = () => useNestComponents([
    {
        component: NConfigProvider
    },
    {
        component: NNotificationProvider,
    },
    {
        component: NMessageProvider
    },
])
</script>

<template>
    <AppProvider>3123123</AppProvider>
</template>