1-11. slot

 

slot이란?

특정 부분만 html 요소를 재정의해서 사용할 수 있게끔 해주는 방식을 slot 이라고 한다.

 

 

SlotView.vue

<template>

  <div>

    <button

      class="btn btn-primary"

      data-bs-toggle="modal"

      data-bs-target="#userModal"

    >

      Show Modal

    </button>

    <button

      class="btn btn-primary"

      data-bs-toggle="modal"

      data-bs-target="#userModal2"

    >

      Show Modal

    </button>

    <slot-modal modalId="userModal">

      <template v-slot:title>모달창 타이틀</template>

      <template v-slot:body>

        <div class="row gy-2">

          <div class="col-3">

            <label for="" class="form-label">이메일 주소</label>

          </div>

          <div class="col-9">

            <input type="email" name="" id="" class="form-control" />

          </div>

          <div class="col-3">

            <label for="" class="form-label">전화번호</label>

          </div>

          <div class="col-9">

            <input type="tel" name="" id="" class="form-control" />

          </div>

          <div class="col-3">

            <label for="" class="form-label">주소</label>

          </div>

          <div class="col-9">

            <input type="text" name="" id="" class="form-control" />

          </div>

        </div>

      </template>

      <template v-slot:footer>

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

          닫기

        </button>

        <button type="button" class="btn btn-primary">저장</button>

      </template>

    </slot-modal>

    <slot-modal modalId="userModal2">

      <template v-slot:title>모달창 타이틀2</template>

      <template v-slot:body>

        <div class="row gy-2">

          <p>문장1</p>

          <p>문장2</p>

          <p>문장3</p>

        </div>

      </template>

      <template v-slot:footer>

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

          닫기

        </button>

        <button type="button" class="btn btn-primary">저장</button>

      </template>

    </slot-modal>

  </div>

</template>

<script>

import SlotModal from '@/components/fragments/SlotModal.vue'

export default {

  components: { SlotModal },

  data() {

    return {

      sampleData: ''

    }

  },

  created() {},

  mounted() {},

  unmounted() {},

  methods: {}

}

</script>

 

 

 

SlotModal.vue

<template>

  <div

    class="modal fade"

    :id="modalId"

    data-bs-backdrop="static"

    data-bs-keyboard="false"

    tabindex="-1"

    :aria-labelledby="`${modalId}Label`"

    aria-hidden="true"

  >

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <h1 class="modal-title fs-5" :id="`${modalId}Label`">

            <slot name="title"></slot>

          </h1>

          <button

            type="button"

            class="btn-close"

            data-bs-dismiss="modal"

            aria-label="Close"

          ></button>

        </div>

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

        <div class="modal-footer">

          <slot name="footer"></slot>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  components: {},

  props: {

    modalId: {

      type: String,

      default: 'myModal'

    }

  },

  data() {

    return {

      sampleData: ''

    }

  },

  created() {},

  mounted() {},

  unmounted() {},

  methods: {}

}

</script>