vue.js 컴포넌트 변경법(동적 컴포넌트)

// template tag
<div>
  <button
  v-for="list in arr"
  :key="list.id"
  :class="['oval', { active: select === list.name }]"
  @click="select = list.name"
  >
  </button>
</div>
<component :is="select" /> // 컴포넌트 태그 안에 :is를 넣어주고 선택값을 지정해준다.
  
  
// script tag
// 컴포넌트 임포트.
  
export default {
    components: { //넣을 컴포넌트 입력
        component,
        component1,
        component2,
        component3
    },
    data() {
        return {
            select: 'component',
          	arr: [{
             // data...
            }]
        };
    }
};
  

이렇게 하면 한 화면 안에서 해당 버튼을 누를 때마다 원하는 컴포넌트를 띄울 수 있게 된다.

이를 동적 컴포넌트라 한다.