0

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

向导组件定义：

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

这里明显的问题是，一切都是 VNode，不能很好地呈现给 DOM。我试过使用render()，h()但那些似乎不是我想要的。还尝试了 v-html 绑定，但同样，这并不需要 VNode。

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

4

0 回答 0