사용자 지정 범위 슬롯을 사용하는 예시 모달

1. 부모 Modal.vue

<!-- Modal.vue -->
<template>
  <div>
    <b-button variant="outline-primary" @click="onClick">Modal Button</b-button>
    <ModalCompo v-model="modalShow"
                @statChange="onClick">

    </ModalCompo>
  </div>
</template>

<script>
import ModalCompo from "@/components/ModalCompo"

export default {
  name: "Modal",
  components: {
    ModalCompo
  },
  data () {
    return {
      modalShow: false
    }
  },
  methods: {
    onClick() {
      this.modalShow = !this.modalShow
    }
  }
}
</script>

 

 

2. 자식 ModalCompo.vue

<!-- ModalCompo.vue -->
<template>
  <div>
    <b-modal id="ModalCompo"
             v-model="modalShow"
             @hide="statChange"
             footer-class="justify-content-center"
             size="md"
             no-close-on-backdrop
             no-close-on-esc
             centered
             scrollable>

      <template #modal-header="{ close }">
        <h5 class="modal-title">header</h5>
        <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </template>

      <template>
        <p>내용</p>
      </template>

      <template #modal-footer="{ ok, cancel, hide }">
        <b-button size="sm" variant="success" @click="ok()">확인</b-button>
        <b-button size="sm" variant="danger" @click="cancel()">취소</b-button>
        <b-button size="sm" variant="danger" @click="hide()">숨김</b-button>
      </template>

    </b-modal>
  </div>
</template>

<script>
export default {
  name: 'ModalCompo',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      modalShow: this.value
    }
  },
  watch: {
    value (newVal) {
      this.modalShow = newVal
    },
  },
  methods: {
    statChange () {
      this.$emit('statChange')
    }
  }
}
</script>

watch가 있는이유! 

4번째 줄에서 v-model로 modalShow를 default: false로 선언했으니깐, watch로 한번더 감지해서 true로 바꿔줘야한다.

만약에 default를 true로 바꾸면 watch를 지워줘도 된다

 

 

 

3. 이미지

 

 

참고

https://bootstrap-vue.org/docs/components/modal

BootstrapVue