럿고의 개발 노트
[Goorm] Vue.js로 시작하는 SPA개발 Chapter6. Components 본문
[Goorm] Vue.js로 시작하는 SPA개발 Chapter6. Components
KimSeYun 2019. 11. 28. 19:07[Goorm] Vue.js로 시작하는 SPA개발
6. Components
6.1. Components 기본 개념
● Components
- Root Vue Instance안에서 Component 체계를 가지고 있는 것
- Vue Instance이기 때문에 Instance Option들을 똑같이 받음
- 사용 순서
■ 웹페이지에서 사용하게 될 Component들을 먼저 정의 및 등록 - JavaScript
■ 웹페에지에서 Component 사용할 곳을 지정 - HTML
■ Root Instance를 생성 - !JavaScript
- Component의 핵심은 재 사용성
6.2. Components 기본 예제 실습
● 실습 코드
6.3. Props로 Data 주고 받기
● Props
- 사용자 정의 Attribute로, 부모에서 자식 Component로 특정 값을 넘길 때 사용
- Component에서 사용할 Props을 정의해야 함
■ 이후엔 일반 Vue Component의 변수처럼 사용 가능
■ 동일한 Component들을 여러 개의 Instance로 만들어야 할 때 유용
[Component를 안 쓴 v-for]
[Component를 쓴 v-for]
6.4. Event로 Data 주고받기
● Events in Components
- v-on & $emit(EVENT_NAME[, ...args])를 이용해 자식과 부모의 데이터 교환 가능
- Custom Event를 정의해서 활용 그낭
6.5. Dynamic Component 개념
● Dynamic Component
- Component는 하나의 Root Element만 가질 수 있음
■ 하나의 <div>안에서 Template을 정의하는 것을 추천
- 일부 Element들 안에서 Component를 사용할 수 없음
■ is Attribute를 활용해서 이를 대체할 수 있음
- 일반적인 Event Bubbling과는 달리, Event는 한 단계만 넘어감
■ 필요시엔 Event를 계속 넘겨주는 것이 필요
■ 복잡한 데이터를 빈번하게 주고받아야 한다면 State를 활용하는 것을 추천
★ Event Bubbling : 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미
6.6. Dynamic Component 실습
● 실습 코드
● 실습 코드 및 출처
- 실습 코드 : https://github.com/ksy90101/Vue.js/tree/master/%5BGoorm%5DVue.js/Chapter06
'Vue.js Note > [Goorm] Vue.js로 시작하는 SPA 개발(동영상강의)' 카테고리의 다른 글
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter7. 마무리 (0) | 2019.11.28 |
|---|---|
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter5. Directives (0) | 2019.11.28 |
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter4. Template Syntac (0) | 2019.11.28 |
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter3. Vue Instance와 작동원리 (0) | 2019.11.28 |
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter2. Hello World로 만나는 Vue (0) | 2019.11.28 |
