슬롯은 부모가 자식 컴포넌트에 템플릿 콘텐츠를 전달하게 해줍니다 — 사용자가 내부 마크업을 제어하는 유연하고 재사용 가능한 래퍼(카드, 모달, 레이아웃)를 만드는 방법입니다.
기본 슬롯
vue
<!-- Card.vue -->
<template>
<div class="card">
<slot></slot> <!-- 부모의 콘텐츠가 여기에 주입됨 -->
</div>
</template>
vue
<!-- 부모 -->
<Card>
<h2>Title</h2> <!-- 이 마크업이 슬롯을 채움 -->
<p>Any content!</p>
</Card>
자식은 "구멍"()을 정의하고, 부모는 원하는 마크업으로 그것을 채웁니다. 이는 props로 문자열을 전달하는 것보다 훨씬 유연합니다.
