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

我有一个物品清单。每个对象都包含一个

type

字段，用于确定需要渲染的组件。例如，对于

段落

类型，我需要呈现名为

段落

的组件。我大概有十几种不同的组件类型

---

目前，我用Javascript循环浏览列表。我创建了一个带有随机ID的div，并将其替换为我使用

new[ComponentType]（{el:…}）

手动创建的Vue组件。但是，这需要DOM操作。有没有更好的方法不需要手动操作DOM结构<代码>v-用于或类似用途？

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

下面是这些文档中显示的示例

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>    

var vm=new Vue({
el:“#示例”，
数据：{
当前视图：“主页”
},
组成部分：{
主页：{/*…*/}，
职位：{/*…*/}，
存档：{/*…*/}
}
})    

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