Component
- Vue의 가장 강력한 기능 중 하나
- HTML Element를 확장하여 재사용 가능한 코드를 캡슐화함
- Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용
- Life Cycle Hook 사용 가능
- 전역 컴포넌트와 지역 컴포넌트가 있다
전역 컴포넌트 등록
- 전역 컴포넌트를 등록하려면, Vue.component('tagName', options)를 사용
지역 컴포넌트 등록
- 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다.
컴포넌트간 통신
- 상위(부모) - 하위(자식) 컴포넌트 간의 data전달방법
- 부모에서 자식 : props라는 특별한 속성을 전달
- 자식에서 부모 : event로만 전달 가능함(Emit)
상위에서 하위 컴포넌트로 data 전달
- 하위 컴포넌트는 상위 컴포넌트의 값을 직접 참조가 불가능함
- data와 마찬가지로 props 속성의 값을 template에서 사용이 가능
렌더링 과정
- new Vue()로 상위 컴포넌트인 인스턴스를 하나 생성
- Vue.component()를 이용해 하위 컴포넌트인 child-component 생성
- div 내부에 child-component가 있기 때문에 하위 컴포넌트가 된다. 처음 생성한 인스턴스 객체가 #app의 요소를 가지기 때문에 부모와 자식 관계가 성립
- 하위 컴포넌트에 props 속성 정의 ['propsdata']
- html에 컴포넌트 태그(child-component)를 추가
- 하위 컴포넌트에 v-bind속성을 사용하면 상위 컴포넌트의 data의 key에 접근이 가능
- 상위 컴포넌트의 message 속성 값인 String 값이 하위 컴포넌트의 propsdata로 전달
- 하위 컴포넌트의 template 속성에 정의된
<span>{{propsdata}}</span에게 전달된다.
동적 props
- v-bind를 이용해 부모의 데이터에 props를 동적으로 바인딩할 수 있음
- 데이터가 상위에서 업데이트 될 때마다 하위 데이터로도 전달됨
하위에서 상위 컴포넌트로 data 전달
- 컴포넌트 및 props와는 달리 이벤트는 자동 대소문자 변환이 제공되지않음
- emit할 정확한 이벤트 이름을 작성해야한다
- 하위 컴포넌트에서 상위 컴포넌트가 지정한 이벤트를 발생 ($emit)
- 상위 컴포넌트는 하위 컴포넌트가 발생한 이벤트를 수신하여 data처리
만반잘부