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>

在Vue中呈现不同组件类型的列表

1 个答案: