假设我有一个包含数据的组件:
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>
以下will个选项可以工作，但编译器会抛出警告，并使用不推荐的语法:
<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模板语法而不使用渲染功能来实现这一点？