부모가 자식 레이아웃의 콘텐츠 영역을 채웁니다.
slot은 자식이 구조와 스타일을 제공하면서 부모가 콘텐츠를 전달하는 합성 수단입니다. 이름 있는 slot과 slot props로 여러 영역과 데이터를 노출할 수 있습니다.
상속보다 slot과 props 합성을 우선하면 결합이 낮은 UI API를 만들기 쉽습니다.
slot 기본 콘텐츠는 부모가 아무것도 전달하지 않았을 때만 렌더됩니다.
slot props로 자식 내부 상태 전체를 노출하면 캡슐화가 약해집니다.
로컬 프로젝트에서 확인해보세요footer 이름 slot을 추가하세요.
<script setup>
import { defineComponent, h } from "vue";
const Card = defineComponent({
setup(_, ctx) {
return () =>
h("article", { class: "card" }, [
h("header", ctx.slots.header?.()),
h("section", ctx.slots.default?.()),
]);
},
});
</script>
<template>
<main>
<Card
><template #header><h1>Vue 합성</h1></template>
<p>부모가 본문을 채웁니다.</p></Card
>
</main>
</template>
<style>
.card {
padding: 16px;
border: 1px solid #42b883;
}
</style>