[vue.js] 뷰 - 동적 컴포넌트 v-bind:is

 

상황에 따라 사용될 컴포넌트가 동적으로 변경되어야 할 때가 있다. 그럴 때 아래와 같은 방법을 사용한다.

 

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

 

components에 사용할 컴포넌트 목록을 추가한다.

아래처럼 is prop에 변경할 컴포넌트명을 가지고 있는 data를 바인딩한다.

초기 값이 home으로 되어 있기 때문에 home 컴포넌트가 노출된다.

조건에 따라 currentView 값을 바꾸면 그에 맞는 컴포넌트가 노출된다.

 

<component v-bind:is="currentView">
  <!-- vm.currentView가 변경되면 컴포넌트가 변경됩니다! -->
</component>

 

참고

https://kr.vuejs.org/v2/guide/components.html#%EB%8F%99%EC%A0%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8