How to declare a list of slots with dynamic names and dynamic components in a VueJS template?

Question

Suppose I have a component with data:

data: function () {
  return {
    slots: [
      { Id: 1, slotName: \'apple\', comp         


        

Answer 1

You can use v-for into a template component

You just need to specify the key on the component.

<child-component>
  <template v-for="slot in slots" v-slot:[slot.slotName]="slotProps">
    <component :key="slot.Id" :someProp="slotProps"></component>
  </template>
</child-component>