Vue.js 为所有渲染函数VUEJ创建数组

澄清
我意识到我的问题写得不好（很抱歉）。因此，我重写了我的问题和附带的例子

---

我想使用VueJS中的渲染功能创建许多组件。每个函数的格式基本相同，只是插入的数据会发生变化。在我看来，每次重写渲染函数只是为了创建不同的组件（当每个组件的基本结构相同时），这似乎是相当重复的（一点也不枯燥）

因此，我要做的是创建一个数组，其中包含我希望用于各种不同组件的所有数据。然后，我希望遍历该数据，每次运行Render函数

例如，假设这是我的数据：

var components = [
        { name: 'label',
          props: ['tag', 'type', 'size', 'color', 'direction'],
          class: 'label',
          tagOption: true,
          tag: 'div'},

        { name: 'icon',
          props: ['type', 'size', 'color'],
          class: 'icon',
          tagOption: false,
          tag: 'i'}
    ]

对该数据运行循环相当于按如下方式编写渲染函数两次：

标签组件

export label {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        let classes = ['ui', 'label']
        if (this.type) { classes.push(this.type) }
        if (this.size) { classes.push(this.size) }
        if (this.color) { classes.push(this.color) }
        if (this.direction) { classes.push(this.direction) }

        return createElement(
            this.tag || 'div',
            { class: classes },
            this.$slots.default
        );
    }
}

export icon {
    props: ['type', 'size', 'color'],
    render(createElement) {
        let classes = ['ui', 'label']
        if (this.type) { classes.push(this.type) }
        if (this.size) { classes.push(this.size) }
        if (this.color) { classes.push(this.color) }

        return createElement(
            'i',
            { class: classes },
            this.$slots.default
        );
    }
}

---

图标组件

export label {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        let classes = ['ui', 'label']
        if (this.type) { classes.push(this.type) }
        if (this.size) { classes.push(this.size) }
        if (this.color) { classes.push(this.color) }
        if (this.direction) { classes.push(this.direction) }

        return createElement(
            this.tag || 'div',
            { class: classes },
            this.$slots.default
        );
    }
}

export icon {
    props: ['type', 'size', 'color'],
    render(createElement) {
        let classes = ['ui', 'label']
        if (this.type) { classes.push(this.type) }
        if (this.size) { classes.push(this.size) }
        if (this.color) { classes.push(this.color) }

        return createElement(
            'i',
            { class: classes },
            this.$slots.default
        );
    }
}

总之

这是我所做的而不是想做的： 有一个label.js（或label.vue）文件，它运行渲染函数来创建标签组件，还有一个单独的icon.js文件，它运行基本相同的渲染函数来创建图标组件

这就是我想做的事： 有一个文件可以循环数据数组，通过渲染函数在每个循环中运行并导出该数据

这可能吗？如果是这样的话，有什么办法吗

---

谢谢。

有几种方法可以做到这一点。下面是一个将组件注册为全局组件的示例

for (let tmpl of components){
  let render = function(createElement){
    let classes = ["ui", tmpl.name]  
    const props = tmpl.props.slice(1)
    for (let prop of props)
      if (this[prop]) classes.push(this[prop])

    return createElement(tmpl.tag, {class: classes}, this.$slots.default)
  }

  Vue.component(`${tmpl.name}-component`,{
    props: tmpl.props,
    render
  })
}

new Vue({
  el:"#app"
})

模板示例：

<div id="app">
  <label-component direction="horizontal">stuff</label-component>
  <icon-component size="large" color="blue">Other stuff</icon-component>
</div>

---

.

您可以在Vue声明之外生成组件：

（我重命名了组件，因为Vue不喜欢使用常见的HTML标记名，如

标签

或

图标

作为组件名）

const组件=[
{name:'child1'，
道具：['tag'，'type'，'size'，'color'，'direction']，
类别：“标签”，
tagOption：对，
标记：'div'}，
{姓名：'child2'，
道具：['type'，'size'，'color']，
类：“图标”，
tagOption:false，
标记：'i'}
];
//函数生成组件
const generateComponents=components=>components
.map（c=>Object.assign（{[c.name]：{
道具：c.道具，
渲染：函数（createElement）{
常量类=['ui'，'label']；
class.push（c.class）；//我想你忘了这个？
if（this.type）{classes.push（this.type）}；
if（this.size）{classes.push（this.size）}；
if（this.color）{classes.push（this.color）}；
if（this.direction）{classes.push（this.direction）}；
返回createElement(
c、 标记| |“div”，
{class:classes}，
这是$slots.default
);
}
}
})).reduce（（a，v）=>Object.assign（a，v），{}）；
//给你
常量myComponents=生成组件（组件）；
新Vue({
el:“#应用程序”，
成分：myComponents
});
.green{颜色：绿色；字体重量：粗体}
.mytype{背景色：米色}

你好
你好
最后请澄清您想要的输出。你的目标是什么？是否要模拟
v-for
并为每个人呈现一个孩子列表？下面是在渲染函数中创建子节点的方式：
v-for
emulation:@wostex我重写了我的问题以更好地解释我的问题。检查我的答案。谢谢你的回答。我不清楚我在问什么（很抱歉）。我重写了我的问题，以便更好地解释我的问题。谢谢-这非常有帮助（再次）谢谢你的帮助。