在運行時指定 VueJS 組件類型和屬性

Question

我想使用 JSON 對象中的Element.io組件構建一個表單：

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

如何指定要添加到表單的組件？

我想我可以為每個組件創建一個.vue文件，並將 props 傳遞給它，以便它返回一個組件。 但是，這是最好的方法嗎？ 我可以指定組件而不必為該庫中的每個組件創建文件嗎？

Answer 1

如果我正確理解您的問題，您正在尋找Dynamic Components 。

您可以添加<component>標記並使用is屬性指定組件的類型。

然后，您可以使用v-bind將屬性值對象綁定到組件。

在您的情況下（因為 Element.io 組件名稱似乎是以“el-”為前綴的標記值），您可能會執行以下操作：

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