View on GitHub

Vue-Quick-Start

Vue.js

09 컴포넌트 심화

9.1 단일 파일 컴포넌트

Single File Component는 전역 수준 컴포넌트의 몇 가지 문제점을 해결.

9.3 슬롯

슬롯(slot)을 이용해 부모 컴포넌트에서 자식 컴포넌트로 HTML 마크업을 전달할 수 있음.

9.3.1 슬롯의 기본 사용법

<slot></slot> 태그를 작성하고 부모 컴포넌트에서는 콘텐츠 영역에 자식 컴포넌트의 <slot></slot> 영역에 나타낼 HTML 마크업을 작성하면 됨.

9.3.2 명명된 슬롯

이름을 부여한 슬롯인 명명된 슬롯을 사용하면 컴포넌트에 여러 개의 슬롯을 작성할 수 있음.

9.3.3 범위 슬롯

간혹 자식 컴포넌트에서 부모 컴포넌트로 속성을 전달하여 부모 컴포넌트 측에서 출력할 내용을 커스터마이징 할 필요가 있음. 이런 경우에 사용하는 것이 범위 슬롯임.

9.4 동적 컴포넌트

화면의 동일한 위치에 여러 컴포넌트를 표현해야 할때. <component>요소를 템플릿에 작성하고 v-bind 디렉티브를 이용해 is 특성 값으로 어떤 컴포넌트를 그 위치에 나타낼지 결정하면 됨.

9.5 재귀 컴포넌트

템플릿에서 자기 자신을 호출하는 컴포넌트. 반드시 name 옵션을 지정해야 함.