Component(컴포넌트)
- Vue의 가장 강력한 기능 중 하나
- HTML Element를 확장하여 재사용 가능한 코드를 캡슐화
- Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용
- Life Cycle Hook 사용 가능
- 전역 컴포넌트와 지역 컴포넌트로 나뉨
- 데이터를 메소드 형태로 만들어야 함
전역 컴포넌트 등록
Vue.component(tagName, options)
표기법
- 케밥 표기법: 케밥 표기법으로 컴포넌트를 정의할 때는 사용자 정의 엘리먼트를 부를 때도 케밥 표기법 사용해야 한다.
- 파스칼 표기법: 파스칼 표기법으로 컴포넌트를 정의할 때는 사용자 정의 엘리먼트를 부를 때 두 가지 표기법 모두 사용할 수 있다.
지역 컴포넌트 등록
컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다.
컴포넌트 간 동신
상위(부모)-하위(자식) 컴포넌트 간의 data 전달 방법
부모에서 자식: props라는 특별한 속성을 전달
자식에서 부모: event로만 전달 가능
랜더링 과정
1. new Vue()로 상위 컴포넌트 인스턴스 생성
2. Vue.component()를 이용해 하위 컴포넌트 a 생성
3. <div id="app">내부에 <a>가 있으면 하위 컴포넌트가 된다.
4. 하위 컴포넌트에 props 속성 정의
5. html에 컴포넌트 태그 a를 추가
6. 하위 컴포넌트에 v-bind 속성을 사용하면 상위 컴포넌트의 data의 key에 접근 가능 (b)
7. 상위 컴포넌트의 b 속성 값인 String 값이 하위 컴포넌트의 propsdata로 전달됨
8. 하위 컴포넌트의 template 속성에 정의된 <span>{{propsdata}}</span>에게 전달됨