在運行時指定

我想建立使用Element.io組件從JSON對象形式VueJS組件類型和屬性：在運行時指定

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

如何指定要添加到我的形式的組件？

我想我可以有一個.vue文件爲每個組件，並傳遞道具，所以它會返回一個組件。但是，這是最好的方式嗎？我可以指定組件而不必爲該庫中的每個組件創建文件？

2017-04-04 Rikard

如果我正確理解你的問題，你正在尋找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>

2017-04-04 19:43:02 thanksd

啊，真好！ '+ 1'謝謝。有沒有辦法將一個對象作爲「道具」傳遞給我的合作伙伴？就像' Rikard

我也想知道如何在JSON數組中使用_Dynamic Component_思想？我可以用組件映射我的數組嗎？在React中，我們可以執行'selectOptions = arr.map（opt =>'Vue.js中是否有類似的邏輯？ – Rikard

更新我的答案以解決您的第一個問題。至於你的第二個問題，在我的例子中模板中使用的表單變量是你的JSON數組。使用v-for是你如何將它映射到組件。 – thanksd

回答