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>에게 전달됨