- slot은 재사용 할 컴포넌트에 대한 기본 틀을 제공한다.
- v-slot: 대신 #을 쓸 수 있다.
// /views/SlotModalLayout
<template>
<div class="modal-container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<style scoped>
.modal-container {
border: 1px solid #ddd;
}
</style>
// /views/SlotUseModalLayout
<template>
<modal-layout>
<template #header>
<h1>팝업 타이틀</h1>
</template>
<template v-slot:default>
<p>팝업 컨텐츠 1</p>
<p>팝업 컨텐츠 2</p>
</template>
<template v-slot:footer>
<button type="button">닫기</button>
</template>
</modal-layout>
</template>
<script>
import ModalLayout from "./SlotModalLayout";
export default {
components: { ModalLayout },
};
</script>