將任意Vue.js組件添加到父組件

我正在使用Vue.js爲我的html5遊戲構建ui。我有一種情況，我想定義ui-containers，它基本上只是將其他ui組件分組並將它們放置在屏幕上的某個位置。所以，我可以有這樣的事情怎麼回事：將任意Vue.js組件添加到父組件

<ui-container> 
    <ui-component1></ui-component1> 
    <ui-component2></ui-component2> 
    <ui-component3></ui-component3> 
</ui-container>

，我需要動態地基於數據模型，代表了容器的內容添加和刪除這些組件。問題是我想保持ui-container通用，這樣我就可以在模板中添加任何Vue組件，而無需在模板中提供關於哪些組件的信息。

我用Google搜索，發現這個例子涉及動態注入組件：http://forum.vuejs.org/topic/349/injecting-components-to-the-dom 雖然例如，在數據驅動的版本是容易使和理解，它採用V型爲標籤，因此需要一個手型前需要了解的的子組件。

所以問題是，我該如何概括該示例動態使用任何組件？我的數據模型應該有它的組件類型或標籤名稱，然後在v-for中插入它？或者是否存在這種需求的現有機制？

2016-08-28 Tumetsu

您可以使用特殊的is屬性來動態設置組件的類型。這裏是docs。該代碼看起來有點像：

<div id="app"> 
    <div v-for="component in components" :is="component.type" :value="component.value"></div> 
</div>

2016-08-29 05:56:41 pkawiak

回答