在运行时指定VueJS组件类型和属性

Question

我想使用JSON对象中的Element.io组件构建表单：

var form = [
    {tag: 'input', type: 'text', value: 123}, 
    {tag: 'select', options: [{value: 10, desc: 'ten'}]}
];

如何指定要添加到表单的组件？

我想我可以为每个组件创建一个.vue文件，并将道具传递给它，以便它返回一个组件。但是，这是最好的方法吗？我是否可以指定组件而无需为该库中的每个组件创建文件？

Answer 1

如果我理解你的问题，你正在寻找Dynamic Components。

您可以添加<component>标记，并使用is属性指定组件类型。

然后，您可以使用v-bind将属性值的对象绑定到组件。

在您的情况下（因为Element.io组件名称似乎是前缀为＆＃34; el - ＆＃34;的标记值），您可能会这样做：

<template v-for="input in form">
  <component :is="'el-' + input.tag" v-bind="input"></component>
</template>