How to render content of slots manually?

Question

Vue.js

There is a structure like this:

<parent>
  <comp1 slot="foo"/>
  <comp2 slot="bar"/>
  <comp3 slot="qux"/>
</parent>

In the parent, I get the contents of these slots, respectively, like this:

//parent.vue

this.$slots.foo
this.$slots.bar
this.$slots.qux

Now I need to render each of them into and transfer the data, I do it like this:<component>

//parent.vue

<div v-for="data in dataset">
  <component v-for="item in items" :is="$slots[item.slotname]" :data="data"/>
</div>

but I get an error:

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. vue.runtime.esm.js:587
[Vue warn]: Failed to mount component: template or render function not defined.

I tried to :isreturn a value from the attribute, render(h) => h(...)but I can't correctly pass data to the component fromdataset

Answer 1

Can't it be easier?

// parent.vue
<template>
  <slot name="foo"/>
  <slot name="bar"/>
  <slot name="qux"/>
</template>