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

Question

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

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

Answer 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>