slot이란?

slot이란?

slot은 컴포넌트의 재사용성을 높여주는 기능이다. 특정 컴포넌트에 등록된 마크업을 확장하거나 재정의할 수 있다.

사용법

slot을 실습하기 위해 Modal 컴포넌트를 이용한다.
(Modal 컴포넌트 소스: https://kr.vuejs.org/v2/examples/modal.html)
위의 사이트에서 우리는 Modal 컴포넌트에 대한 소스를 얻을 수 있다.
위 사이트에서 제공하는 Modal 컴포넌트를 만들고 화면에 띄우면
위와 같은 모달 창을 확인할 수 있다. 모달 창을 개발자가 원하는 컴포넌트로 재사용할 수 있다.
Modal 컴포넌트의 소스를 보면

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

slot이라는 태그를 이용하여 header와 body 그리고 footer를 설정한 것을 확인할 수 있다.

이것을 상위 컴포넌트에서 Modal 컴포넌트 등록하고 slot 태그가 아닌 class와 id와 같은 속성값 처럼 slot 속성을 이용하여 재사용을 하면 된다.
위와 같은 기본 Modal 컴포넌트를 상위 컴포넌트에서 불러와 아래와 같은 컴포넌트로 만들어보자.

<template>
  <Modal>
    <div slot="header">
      <h3>
        멘토링 소개
      </h3>
    </div>
    <div slot="body">
      <div class="slot-body"><h4>안녕하세요. 멘토링 페이지입니다.</h4></div>
    </div>
    <div slot="footer">
      <div class="slot-footer">
        <button class="mentoring__button button-cancel">취소</button>
        <button class="mentoring__button button-next">다음으로</button>
      </div>
    </div>
  </Modal>
</template>

<script>
import Modal from "./Modal";
export default { 
  components: {
    Modal
  }
};
</script>

기본 모달 컴포넌트의 header 부분을 보면 아래와 같이 slot 태그에 header라는 name 속성으로 되어 있다.

<slot name="header"> 

상위 컴포넌트에서는 slot 태그가 아닌 slot 속성을 이용하여 기본 컴포넌트에서 설정한 header라는 이름을 slot 속성으로 설정하여 사용하면 된다.

<div slot="header">