slot 으로 재사용하기

slot은 vue의 좋은 기능중 하나로 컴포넌트를 재사용하기 굉장히 좋습니다.

Vue 공식사이트의 모달 컴포넌트를 가져온 코드입니다.

 

https://kr.vuejs.org/v2/examples/modal.html

모달 컴포넌트 — Vue.js

 

<!-- Modal.vue -->

<transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <slot name="header">default header</slot>
          </div>

          <div class="modal-body">
            <slot name="body">default body</slot>
          </div>
        </div>
      </div>
    </div>
  </transition>

 

slot에 name을 정의하고 상위 컴포넌트에서 재사용하고 내용을 재정의 할 수 있습니다.

 

<Modal v-if="showModal">
<!--
you can use custom content here to overwrite
default content
-->
  <h3 slot="header">
    경고!!
    <i class="fas fa-times" @click="showModal = false"></i>
  </h3>
  <p slot="body">내용을 입력하세요.</p>
</Modal>