Seeking guidance on binding a component's prop to its own data property. Let's say we have a component named ModalComponent
<template> // ModalComponent.vue
<div v-if="showModal">
...
<button @click="showModal = !showModal">close the modal internally</button>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
},
data() {
return {
showModal: false,
}
}
}
</script>
<style>
</style>
Let's imagine that this modal is used as a reusable component within a parent component, and an external button triggers its display.
<template>
<button @click="showChild = !showChild">click to open modal</button>
<ModalComponent :show="showChild" />
</template>
<script>
export default {
components: {ModalComponent},
data() {
return {
showChild: false,
}
}
}
</script>
<style>
</style>
How can I ensure that clicking the parent button opens the modal by binding the local showModal to the show prop? And once the modal is closed using the internal close button, how do I make it pop up again when the parent button is clicked? (This scenario involves Vue 3)
Any assistance would be greatly valued. Thank you.