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

Question

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

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

Answer 1

是的，有更好的方法。使用动态组件。

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

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>