如何在 VueJS 模板中声明具有动态名称和动态组件的插槽列表? [英] How to declare a list of slots with dynamic names and dynamic components in a VueJS template?

问题描述

假设我有一个包含数据的组件:

Suppose I have a component with data:

data: function () {
  return {
    slots: [
      { Id: 1, slotName: 'apple', componentName: 'Apple' },
      { Id: 2, slotName: 'banana', componentName: 'Banana' }
    ]
  }
}

并且我想将插槽列表作为作用域插槽传递给子组件.以下语法不起作用，因为您不能在模板元素上使用 v-for:

and I want to pass the list of slots as scoped slots to a child component. The following syntax won't work because you cannot use v-for on a template element:

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

并且以下语法将不起作用，因为在 Vue 2.6.0+ 任何未包含在