Vue Components
독립적인 기능을 수행하는 소프트웨어 모듈입니다.
화면을 일정 단위로 쪼개 구조화하여 재활용 가능한 형태로 관리할 수 있습니다.
코드의 재사용에 유리합니다.
전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있습니다.
지역 컴포넌트는 Vue 인스턴스 내에 Components속성을 추가해 등록할 컴포넌트의 이름과 내용을 정의합니다.
새 Vue 인스턴스가 생성될 때마다 등록해 줘야 합니다.
Vue Component 통신
컴포넌트 자체적으로 고유한 유효범위를 갖기 때문에 같은 웹 페이지 내에 있더라도 공유 데이터를 공유할 수 없습니다.
그러므로 데이터 전달 방식이 필요합니다.
1. 부모 -> 자식 : props 전달
2. 부모 <- 자식 : emit 이벤트
3. 비부모 자식간 통신
1. props 전달
하위 컴포넌트에 전달 받을 props 속성명을 정의하고,
HTML에 v-bind 속성을 설정합니다.
2. emit 이벤트
이벤트를 방생해 상위 컴포넌트에 신호를 보냅니다.
HTML에 v-on 속성으로 설정합니다.
3. 비부모 자식간 통신
EventBus
기본적으로 Vue는 상위-하위 컴포넌트간 데이터 통신을 지원하지만,
경우에 따라서는 상위-하위 구조를 벗어난 컴포넌트간 통신이 필요합니다.
- 이벤트를 중계할 수 있는 별도의 Vue 인스턴스를 생성해서
상위-하위 구조를 벗어난 컴포넌트 간에도 데이터를 주고받을 수 있습니다.
이벤트를 발생시킬 컴포넌트에서 $emit()을 호출합니다.
이벤트를 받을 컴포넌트에서 $on()로 수신합니다