Slot

프로젝트를 진행하다보면 어떤 화면은 굉장히 비슷한 UI를 가지고 있는데 일부만 다르게 사용하는 경우가 많이 있다.
Slot은 컴포넌트 내에서 다른 컴포넌트를 사용할 때 즉, 자식 컴포넌트의 특정 UI 부분을 재정의해서 사용하는 것이다.

// SlotModalLayout.vue
<template>
  <div class="modal-container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="main"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

v-slot:header로 되어있으면 template으로 감싸져 있는 것 안에 들어가있는 html 코드가 slotModalLayout의 name="header"인 부분으로 교체된다.

// SlotUseModalLayout.vue
<template>
  <modal-layout>
    <template v-slot:header>
      <h1>팝업 타이틀</h1>
    </template>
    <template v-slot:main>
      <p>팝업 컨텐츠 1</p>
      <p>팝업 컨텐츠 1</p>
    </template>

    <template v-slot:footer>
      <button type="button">닫기</button>
    </template>
  </modal-layout>
</template>

<script>
import SlotModalLayout from "./SlotModalLayout.vue";

export default {
  components: { "modal-layout": SlotModalLayout },
  data() {
    return {};
  },
};
</script>

// index.js
const routes = [
  	...,
	{
    	path: "/slot",
    	name: "SlotUserModalLayout",
    	component: () =>
	      import(/* webpackChunkName: "about" */ 	"../views/SlotUseModalLayout.vue"),
	},
]