Vue slot 활용하기

박경준·2021년 11월 4일
0

vue beginner

목록 보기
16/18

- 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>
    <!-- slot에 name이 없으면 v-slot:default로 쓴다 -->
    <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>
profile
빠굥

0개의 댓글