Question

我正在使用Vue.js为我的html5游戏构建ui。我有一个案例，我想定义ui-containers，它基本上只是将其他ui组件分组并将它们放置在屏幕上的某个位置。所以我可以继续这样的事情：

<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-for for tag，因此需要先了解子组件的类型。

所以问题是，我如何推广该示例以动态地使用任何组件？我的数据模型是否应该具有组件类型或标签名称，然后在v-for中进行插值？或者是否存在这种要求的机制？

Answer 1

您可以使用特殊is属性动态设置组件的类型。这是docs。代码看起来有点像：

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