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

站长

2024年08月11日 08:55 · 阅读数 15

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
    }
}

1个回答

test

2024-08-11

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标签

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容