How to change ref variable in child component from @click in parent? Vue 3

Question

I have a modal component 'ConfirmModal.vue' from TailwindUI which can be opened/closed by setting 'const open = ref(true/false)'

<template>
  <TransitionRoot as="template" :show="open">
    <Dialog as="div" class="relative z-10" @close="open = false">

"Open" is defined in the setup of the component like so

<script setup>
    import { ref } from 'vue'
    const open = ref(false)
</script>

This modal component is imported into the parent 'Edit.vue':

<script>
    import ConfirmModal from '@/Components/ConfirmModal.vue';

    export default {
        components: {
            ConfirmModal
        },

                

Ideally, I want to set "open" to true when the user clicks the TrashIcon. I've managed to pass some props into the component, like a message to display, but struggling to understand what is required in this case.

<TrashIcon @click="???"/>
<ConfirmModal :title="'Delete client'" :message="'Are you sure you want to delete this client? This action cannot be undone.'"/>

Answer 1

You can pass another prop for showing/hiding and watch it:

 const { ref, watch } = Vue const app = Vue.createApp({ setup() { const isActive = ref(false) return { isActive } } }) app.component('modal', { template: ` <div v-show="active"> <h3>{{ title }}</h3> <p>{{ message }}</p> <button @click="active = !active">close</button> </div> `, props: ['open', 'title', 'message'], setup(props) { const active = ref(props.open) watch( () => props.open, () => active.value = true ); return { active } } }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3"></script> <div id="demo"> <button @click="isActive = !isActive">toggle modal</button> <modal :open="isActive" :title="'Delete client'" :message="'Are you sure you want to delete this client? This action cannot be undone.'"/> </div>