Use Modals Dynamically in VueJS - vuejs3

Question

I created a Modal template in vueJS and I want to set the content inside of it dynamically.
Sometimes I will want the Modal to delete some kind of data.
E.g: Do you want to delete the user with ID 5?
But other times i will want the Modal to act as a Form input data.
The Modal template I'm using is this Modal.vue
<template>
<div class="vue-modal" v-show="open">
<div class="vue-modal-inner">
<div class="vue-modal-content">
<button type="button" click="$emit('close')">Close</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: {
open: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped>
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.vue-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.vue-modal-inner {
max-width: 500px;
margin: 2rem auto;
}
.vue-modal-content {
position: absolute;
min-width: 300px;
left: 50%;
top: 35%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.3);
background-clip: padding-box;
border-radius: 0.3rem;
padding: 1rem;
}
</style>
The content inside of vue-modal-content is what I want to set dynamically depending on how I am going to use the Modal (Delete, Update, Create)
Here's how I create it in parent component
<Modal :open="modalEditar.mostrar" #close="modalEditar.mostrar=false">
</Modal>

Answer 1

Probably easiest is to use slots.
There's a description of how to set this up at digitalocean so I won't go through it, since it's all there, but would add scope slots to the implementation. The issue is that you want to drive the kinds of buttons from the parent and the example only shows the close button as being available from within the the modal component.
To achieve that, you can pass the function to the slot like <slot :close="close">
<template>
<div class="vue-modal" v-show="open">
<div class="vue-modal-inner">
<div class="vue-modal-content">
<slot :close="close"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: {
open: {
type: Boolean,
default: false
}
},
methods: {
close() {
this.$emit('close');
},
},
}
</script>
and then you can have the function available in the parent through <template v-slot={close} >
<script setup>
import { ref } from 'vue'
import Modal from "./Modal.vue"
const isModalVisible = ref(true);
function closeModal() {
isModalVisible.value = false;
}
</script>
<template>
<button #click="isModalVisible = true">
open
</button>
<Modal :open="isModalVisible" #close="closeModal">
<template v-slot={close} >
This is a body<br/>
<button #click="close" class="btn-green">
CLOSE
</button>
</template>
</Modal>
</template>
here is a working example