Javascript 在渲染函数中生成动态数量的Vue插槽

我正在尝试从渲染函数构建自定义组件

正在呈现的此组件接受任意数量的插槽。在下面的示例中，有三个可用插槽（名为

元素_1

，

元素_2

，

元素_3

）

下面的

Array.reduce（）

相当于：

scopedSlots: {
  "element_1": () => createElement('div', 'hello world'),
  "element_2": () => createElement('div', 'hello world'),
  "element_3": () => createElement('div', 'hello world'),
}

这是一个精简的示例，使用了

Array.reduce（）

：

---

然而，没有任何渲染，也没有错误来指导我。有什么想法吗？

reduce方法不起作用，因为它在

createElement（'div'，'hello world'）之前缺少一个返回值。

：

完整示例

const ReplicatorComponent={
模板：`
复制子组件
`
}
常量记录=[{
"索引":1,，
},
{
“指数”：2，
},
{
“指数”：3，
}
]
Vue.component（“我的组件”{
渲染：函数（createElement）{
让slotContent=records.reduce（（a，x）=>（{…a，
['element\'+x.index]：
() => {
返回createElement（'div'，'hello world'）
}
}), {})
返回createElement（ReplicatorComponent{
属性：{
元素：记录长度
},
scopedSlots:slotContent
});
},
})
var app=新的Vue({
el:“#应用程序”，
数据：（）=>（{}）
})

测试

我认为作用域插槽应该是以

道具作为参数的函数
根据Vue.js文档


导出默认值{
渲染（createElement）{
// ...
//一些其他的东西
// ...
//作用域插槽的形式为
//{name:props=>VNode | Array}
scopedSlots：{
默认值：props=>createElement（'span'，props.text）
},
}
}
不同之处在于，在
reduce
中，您创建的函数如下所示

() => { createElement( 'div', 'hello world') }

在硬编码版本中（以及@Boussadjra的anwer中的
forEach
循环中），它们被创建为

() => createElement('div', 'hello world')

它实际上返回所创建的元素。这与使用
reduce
无关，这很好


const ReplicatorComponent={
模板：`
复制子组件
`
};
常量记录=[
{“索引”：1}，
{“索引”：2}，
{“索引”：3}，
];
Vue.component（“我的组件”{
渲染：函数（createElement）{
返回createElement（ReplicatorComponent{
属性：{
元素：记录长度
},
scopedSlots:records.reduce（（a，x）=>({
A.
['element\'+x.index]：（）=>
createElement（'div'，'hello world'）
}), {})
});
},
});
新Vue({
el:“#应用程序”，
数据：（）=>（{}）
});


() => createElement('div', 'hello world')