컴포넌트화하는 것으로 JavaScript 및 HTML, CSS를 분리해서 관리할 수 있다. 장점 : 보수성을 향상시키고 필요한 화면마다 재사용할 수 있다.
부모에서 자식
부모가 가지고 있는 데이터를 자식 템플릿에 표시시켜 보자. 사용자 정의 태그를 작성할 때 간단한 속성 또는 v-bind 지시문 (:으로 생략 가능)을 사용한 바인딩 유형의 속성에서 사용하는 데이터를 지정한다.
자식은 props으로 그 특성을 받아 자신의 데이터와 같이 사용할 수 있다. 다른 데이터에 대입하는 것 같은 느낌이지만 범위가 다르므로 속성 이름은 데이터와 같아도 다른 이름을 사용해도 된다.
자식에서 부모
부모가 가지고 있는 데이터를 자식에 의해서 변경하고 싶은 경우와 자식이 가지고 있는 데이터를 부모에게 보내고 싶은 경우에는 사용자 지정 이벤트와 $emit를 사용한다. 사용자 지정 이벤트는 @click와 같은 이벤트를 만들어 jQuery의 on과 유사하게 동작한다.