在 Vue 中渲染不同组件类型的列表答案

【问题标题】：Rendering a list of different component types in Vue在 Vue 中渲染不同组件类型的列表
【发布时间】：2017-04-25 01:43:21
【问题描述】：

我有一个对象列表。每个对象都包含一个type 字段，用于确定需要呈现的组件。例如，对于paragraph 类型，我需要渲染一个名为Paragraph 的组件。我有大约十几种不同的组件类型。

目前我在 Javascript 中遍历列表。我创建了一个带有随机 ID 的 div，并将其替换为我使用 new [ComponentType]({ el: ... }) 手动创建的 Vue 组件。但是，这需要 DOM 操作。有没有更好的方法不需要手动操作 DOM 结构？ v-for 或类似的？

【问题讨论】：

v-for + v-is ?

标签： javascript vue.js vue-component

【解决方案1】：

是的，有更好的方法。使用Dynamic Components。

这是这些文档中显示的示例。

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})    

<component v-bind:is="currentView">
  <!-- component changes when vm.currentView changes! -->
</component>

【讨论】：

在 Stackoverflow 警察通过并删除您的答案之前，我会在此处添加一个快速代码示例。