VUE3 - Open Bootstrap Modal By Image Click Without JQuery On MultiPage / Component - vue.js

Question

I try to use VUE3 and Bootstrap to open a Modal by clicking one of those two images.
I created 3 Components.
Left DIV (Image)
Right DIV (Image)
Modal to open
Now, i want to click on one of those images and open the modal.
At Singlepage it works. But now i am using Components.
How do i listen in the Component "ModalContact" to the clickevent in other Components?
I uploaded the complete package to github: https://github.com/Gismo1337/wtf-i-am-doing-here

Answer 1

Using Vue 2 and the Vue CLI, I created a couple of Single File Components to demonstrate how to open and close a Bootstrap 4 Modal without jQuery, wrapping the modal in it's own component.
Although this is not using Vue 3, you should be able to port it.
Parent.vue
<template>
<div class="parent">
<h4>Bootstrap Modal Parent</h4>
<div class="row">
<div class="col-md-6">
<button class="btn btn-secondary" #click="showModal">Open Bootstrap Modal</button>
</div>
</div>
<bootstrap-modal-no-jquery v-if="displayModal" #close-modal-event="hideModal" />
</div>
</template>
<script>
import BootstrapModalNoJquery from './BootstrapModalNoJquery.vue'
export default {
components: {
BootstrapModalNoJquery
},
data() {
return {
displayModal: false
}
},
methods: {
showModal() {
this.displayModal = true;
},
hideModal() {
this.displayModal = false;
}
}
}
</script>
BootstrapModalNoJquery.vue
<template>
<div class="bootstrap-modal-no-jquery">
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" #click="saveChanges">Save changes</button>
<button type="button" class="btn btn-secondary" #click="closeModal">Close</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
closeModal() {
this.$emit('close-modal-event');
},
saveChanges() {
this.closeModal();
}
}
}
</script>
<style scoped>
/* Override default value of 'none' */
.modal {
display: block;
}
</style>