템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하도록 할 수 있다.
✨ 이름이 있는 슬롯
<div class="container">
<header>
<!-- 헤더 컨텐츠 -->
</header>
<main>
<!-- 메인 컨텐츠 -->
</main>
<footer>
<!-- 푸터 컨텐츠 -->
</footer>
</div>이러한 경우, 슬롯에 고유 ID를 할당하는 데 사용할 수 있는 name이라는 특수 속성을 사용하여, 컨텐츠가 렌더링되어야 하는 위치를 <slot> 엘리먼트가 결정할 수 있도록 할 수 있다.
이름이 있는 슬롯을 전달하려면, <template> 엘리먼트와 함께 v-slot 디렉티브를 사용하고, 슬롯 이름을 v-slot에 인자로 전달해야한다.
<template v-slot:header>
<!-- 헤더 컨텐츠 -->
</template>
🧚 위는 <template #header> 라고 축약할 수 있다.
