Vue3 手动渲染插槽内容

如何解决Vue3 手动渲染插槽内容

我正在尝试解析插槽的内容并在多个位置呈现内容。这个想法是创建一个向导，允许每个步骤都包含在单个组件中。像这样：

向导组件定义：

<ul>
    <li v-for="icon in icons">{{icon}}<li>
</ul>
<section>
    <ul>
        <li v-for="body in bodies">{{body}}</li>
    </ul>
</section>

向导组件脚本

import {ref} from "vue";

export default {
    setup(props,{slots}) {
        const icons = ref([]);
        const bodies = ref([]);

        for (let item of slots.default()) {
            // not sure if I need to call these,ex: item.children.icon()
            icons.value.push(item.children.icon);
            bodies.value.push(item.children.body);
        }
        
        return {icons,bodies};
    }
}

向导组件使用：

<wizard>
    <wizard-page>
        <template #icon>someIcon</template>
        <template #body>someBody</template>
    </wizard-page>
    <wizard-page>
        <template #icon>someIcon2</template>
        <template #body>someBody2</template>
    </wizard-page>
</wizard>

这里明显的问题是所有东西都是 VNodes 并且不只是很好地渲染到 DOM。我曾尝试使用 render() 和 h()，但它们似乎不是我想要的。还尝试了 v-html 绑定，但同样，这并不期待 VNode。

我不确定是否有更好的方法来做到这一点，或者我是否在这里遗漏了一些简单的东西，但我没有看到一种简单的方法来拆分插槽并将内容呈现在不同的位置。