Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기

Vue.component를 활용하면 해당 컴포넌트 이름을 태그처럼 불러다 쓸 수 있다. component 밑으로 템플릿을 만들어 data를 지정하고, method를 지정할 수 있으며 이를 함수 형태로 콜할 수도 있음. 데이터를 지정하는 경우에도 함수의 형태로 return시켜야 한다는 점에 유의하자. 타 객체 안에 지정된 컴포넌트는 다른 객체가 불러다 쓸 수 없지만, 범위를 지정하지 않은 경우 다른 객체들이 한 컴포넌트를 동시에 갖다 써도 무방하다. 그리고 객체 하나가 컴포넌트를 여러개 불러쓰는것도 당연히 문제되지 않음. 객체 안에서 components 를 직접 지정하여 호출할 수도 있음 : var test3 부분. v-bind:is 를 사용하면, 동적으로 컴포넌트를 조건에 맞게 호출할 수도 있음. 결과물

원문링크 : Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기