Vue

slot 으로 재사용하기

hjcode 2019. 11. 22. 15:46

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

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

 

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

 

모달 컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

<!-- 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>

 

반응형