将任意 Vue.js 组件添加到父组件答案

【问题标题】：Add arbitrary Vue.js components to parent component将任意 Vue.js 组件添加到父组件
【发布时间】：2017-01-04 18:20:58
【问题描述】：

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

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

我需要根据代表容器内容的数据模型动态添加和删除这些组件。问题是我想保持 ui-container 通用，这样我就可以将任何 Vue 组件附加到它，而无需在模板中提供有关可能存在哪些组件的信息。

我在谷歌上搜索并找到了这个关于动态注入组件的示例：http://forum.vuejs.org/topic/349/injecting-components-to-the-dom 虽然示例中的数据驱动版本易于制作和理解，但它使用 v-for 作为标签，因此需要事先知道子组件的类型。

所以问题是，我如何概括该示例以动态处理任何组件？我的数据模型是否应该具有组件的类型或标签名称，然后在 v-for 中插入它？还是有这种要求的现有机制？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：