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>