如何在VueJS模板中声明带有动态名称和动态组件的插槽列表？

Question

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

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

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

<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+ any content not wrapped in a <template> using v-slot is assumed to be for the default slot中。

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

以下可以起作用，但是编译器会发出警告，并且使用不赞成使用的语法：

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

有什么方法可以使用未弃用的Vue模板语法而不使用渲染功能来实现这一目标？

Answer 1

You can use v-for into a template component

您只需要在calendar app上指定key。

component