Vue에서 여러 구성 요소 유형 목록 렌더링

Vue에서 여러 구성 요소 유형 목록 렌더링

나는 물건의 목록을 가지고 있다.각 개체에는type렌더링해야 하는 구성요소를 결정하기 위해 사용되는 필드.예를 들어,paragraph유형 I은 이름이 지정된 구성 요소를 렌더링해야 함Paragraph나는 대략 이런 다른 종류의 성분들을 가지고 있다.

그 순간 나는 Javascript의 목록을 반복해서 훑어보았다.임의 ID로 Div를 생성하고 이를 수동으로 생성하는 Vue 구성 요소로 대체하는 경우new [ComponentType]({ el: ... })그러나, 이것은 DOM 조작을 필요로 한다.DOM 구조를 수동으로 조작하지 않아도 되는 더 좋은 방법이 있는가? v-for아니면 비슷한가?

그래 더 좋은 방법이 있다.동적 구성 요소를 사용하십시오.

여기 이 문서들에서 보여지는 예가 있다.

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>    

참조URL: https://stackoverflow.com/questions/41062783/rendering-a-list-of-different-component-types-in-vue