Slot
<slot> 태그는 컴포넌트 간의 컨텐츠 전달을 위해 사용되는 방식 중 하나입니다.
<slot> 태그를 이용하면 부모 컴포넌트에서 자식 컴포넌트로 컨텐츠를 삽입하여 동적으로 컴포넌트를 구성할 수 있습니다.
<slot> 태그를 사용하여 컨텐츠 뿐만 아니라 컴포넌트를 넘길 수도 있습니다. 자세한 설명을 하기보다는 일단 아래 예제로 설명하도록 하겠습니다.
컨텐츠 전달
Parent Component
<template>
<div>
<h2>Parent Component</h2>
<child-component>
<p>자식 컴포넌트로 전달할 컨텐츠</p>
</child-component>
</div>
</template>
Child Component
<template>
<div>
<h2>Child Component</h3>
<slot></slot>
</div>
</template>
컴포넌트가 렌더링될 때 부모 컴포넌트의 <child-component> 안에 있는 컨텐츠들이 <slot> 태그 위치에 렌더링 됩니다.
이런 식으로 <slot> 태그를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 컨텐츠를 전달하여 컴포넌트의 일부를 동적으로 변환할 수 있습니다.
컴포넌트 전달
또한 <slot> 태그에 다른 컴포넌트를 삽입하는 것도 가능합니다.
아래 예시는 <demo-content> 컴포넌트를 <child-component> 컴포넌트 slot에 전달하는 코드입니다.
당연히 만약 <child-component> 컴포넌트가 <slot> 태그를 갖고 있지 않다면 적용되지 않습니다.
<template>
<div>
<h2>Parent Component</h2>
<child-component>
<demo-content />
</child-component>
</div>
</template>
<slot> 기본값 설정
`<slot>` 태그에 기본 컨텐츠를 지정할 수도 있습니다.
만약 부모 컴포넌트에서 컨텐츠를 전달하지 않았을 경우 보이는 기본값입니다.
<template>
<div>
<h2>Child Component</h3>
<slot>Default Content</slot>
</div>
</template>위와 같이 자식 컴포넌트(전달 받는 컴포넌트)에서 <slot>태그 사이에 컨텐츠를 집어넣어 '기본 컨텐츠'를 설정할 수 있습니다. 부모 컴포넌트에서 컨텐츠를 전달하지 않았을 경우, 기본 컨텐츠가 렌더링 됩니다.
Named Slot
<slot> 태그에 이름을 지정하여 여러 slot을 사용할 수 있습니다.
이름을 지정함으로써 부모 컴포넌트에서 자식 컴포넌트로 여러 개의 slot을 전달하고, 자식 컴포넌트에서는 각각의 slot에 해당하는 컨텐츠를 동적으로 렌더링 할 수 있습니다.
Parent Component
<template>
<div>
<child-component>
<template #header>
<h2>Header 컨텐츠</h2>
</template>
<template #body>
<p>Content 컨텐츠</p>
</template>
<template #footer>
<p>Content 컨텐츠</p>
</template>
</child-component>
</div>
</template>
child Component
<template>
<div>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</template>
name이 지정된 slot에 내용을 전달하기 위해서는 <template> 태그에 `v-slot 디렉티브`를 사용하여야 합니다. 하지만 위 예시와 같이 단축 표기로 `#`을 사용하는 것이 가능합니다.
만약 name이 지정되지 않은 <slot> 태그인 경우 default 값이 사용됩니다.
`<slot>` 태그를 사용하면 컴포넌트 간의 컨텐츠 전달이 쉽고 간편해지고 재사용성이 높아집니다.