Vue.js v-slot

v-slot은 vue.js 2.6.0버전 부터 도입된 비교적 최근에 나온 최신 문법이다.

장점

• 코드 가독성과 유지보수성이 향상된다.
• v-slot을 통해 슬롯 내용을 구성하는 템플릿을 더욱 더 유연하게 변경할 수 있다.
• v-slot은 범위를 제한할 수 있다. 이를통해 코드의 복잡성을 낮출 수 있다.

단점

• v-slot의 사용성이 제한적이다.
• v-slot을 사용하면 코드가 길어진다.
• 슬롯의 범위가 제한되고 컴포넌트 템플릿에서만 사용가능하며 컴포넌트와 템플릿의 구조가 복잡해진다.
• 유지보수나 업그레이드 과정에서 추가적인 작업이 필요할 수 있다.

v-slot 구현

우선 모달 컴포넌트처럼 header, body,footer 세 단계로 명확하게 구분될 수 있는 컴포넌트를 선택했다

그리고 명확하게 부모요소에서 가져올 수 있는 modalTitle 부분을 props로 정의했다.

그후 body와 footer 에 각각 slot을 넣었다.

// components/modal/CustomModal.vue
<template>
    <div
      v-if="open"
      class="modal modal-mask"
      tabindex="-1"
      aria-hidden="true"
      style="display: block"
    >
      <div class="background_close" @click="$emit('close')" />
      <div
        class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable"
      >
        <div class="modal-content">
          <ModalHeader :title="modalTitle" @close="$emit('close')" />
          <slot></slot>
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
</template>

<script>
import ModalHeader from '../../ModalHeader.vue'

export default {
  name: 'CustomModal',
  components: { ModalHeader },
  props: {
    open: { type: Boolean, default: false },
  },
}
</script>

이후 부모 요소에서 컴포넌트를 호출한 후 템플릿을 통해 slot안의 내용을 넣어줬다.

<CustomModal
  :open="modalInfo.open"
  modalTitle="모달"
  @close="handleCloseModal"
>
  <template #default>
    <div class="modal-body">
      <div v-else class="alert_cl_wrap">
				<h1>컨텐츠 내용 입니다.</h1>
      </div>
    </div>
  </template>
  <template #footer>
    <div class="modal-footer">
		   <button>확인</button>
    </div>
  </template>
</CustomModal>

v-slot을 사용하니 컴포넌트 설계를 더욱 체계적으로 해서 재사용성을 높일 수 있을것 같다.

하지만 부모 요소에 컴포넌트가 많아지면 코드가 길어질 수 있어 가독성이 떨어지는 단점이 있다.

부모 요소에서 호출한 CustomModal안에 내용이 복잡해질수록 더 길어질 수 있다.

하지만 그안에 컴포넌트 또한 잘 설계한다면 가독성 측면과 유지보수성도 좋아질것 같다.