사용자 지정 범위 슬롯을 사용하는 예시 모달
2022. 4. 25. 12:08ㆍVue
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">×</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
Quickly integrate Bootstrap v4 components with Vue.js
bootstrap-vue.org
'Vue' 카테고리의 다른 글
Kakao login / map api (0) | 2022.04.28 |
---|---|
vue-fontawesome (0) | 2022.04.27 |
index.html - main.js - App.vue의 흐름 파악 (0) | 2022.04.22 |
Mixin (0) | 2022.04.22 |
Style Guide : 우선순위 권장 (0) | 2022.04.19 |