How can a parent component trigger a child component's modal in Vue.js?

Sharing a variable with the parent

In the Child component, you can use defineExpose to send the status reactive variable accessible to the parent.

• defineExpose() - Vue 3 Docs
• defineExpose from component's <script setup> not working in Vue 3 - StackOverflow

Example

• Try with Playground

or live CDN example:

Show code snippet

JAVASCRIPTCopied
const { createApp, ref, defineExpose } = Vue;

// Child
const ChildComponent = {
  template: `<
    <div v-if="status">
      <div>
        <p>Modal is open!</p>
        <button @click="closeModal">Close</button>
      </div>
    </div>
  `,
  setup() {
    const status = ref(false);

    const closeModal = () => {
      status.value = false;
    };

    defineExpose({ status });

    return { status, closeModal };
  }
};

// Parent
const App = {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null);

    const openChildModal = () => {
      if (childRef.value) {
        childRef.value.status = true;
      }
    };

    return { childRef, openChildModal };
  }
};

createApp(App).mount("#app");

HTMLCopied
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="openChildModal">Open Modal</button>
  <child-component ref="childRef"></child-component>
</div>

Run code snippetHide resultsExpand snippet

Notify the parent about an event

Nevertheless, I believe it is bad practice to extract a function from the component, as in the given example. A component should be self-contained, fully reusable at any time, and minimally affected by external factors. Therefore, I would place both the open and close buttons inside the child component, allowing the parent component to be informed about their clicks through emits.

• defineEmits() - Vue 3 Docs
• @emit is not picked up by parent - StackOverflow
• Vue Composition API: Defining emits - StackOverflow

You can call the emit from the child component, and when it is triggered, the parent component will be notified, allowing you to build custom functions in response.

Example

• Try with Playground

or live CDN example:

Show code snippet

JAVASCRIPTCopied
const { createApp, ref, defineEmits } = Vue;

// Child
const ChildComponent = {
  template: `<
    <button v-if="! status" @click="openModal">Open Modal</button>
    <div v-if="status">
      <div>
        <p>Modal is open!</p>
        <button @click="closeModal">Close</button>
      </div>
    </div>
  `,
  setup(_, { emit }) {
    const status = ref(false);

    const openModal = () => {
      status.value = true;
      emit('opened');
    };
    
    const closeModal = () => {
      status.value = false;
      emit('closed');
    };

    return { status, openModal, closeModal };
  }
};

// Parent
const App = {
  components: { ChildComponent },
  setup() {
    const customFnForChildOpen = () => {
      console.log('modal opened');
    };
    
    const customFnForChildClose = () => {
      console.log('modal closed');
    };
    
    return { customFnForChildOpen, customFnForChildClose };
  }
};

createApp(App).mount("#app");

HTMLCopied
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <child-component @opened="customFnForChildOpen" @closed="customFnForChildClose"></child-component>
</div>

Run code snippetHide resultsExpand snippet

An easy way to do this would be with props. If the parent has a ref isModalShown and the child takes this in as modelvalue, then the child can dynamically react to the state of that ref in the parent component, as well as mutate it directly. In script setup, it would look something like this:

In the parent:

VUECopied
<template>
  <button onclick="isModalShown = true">show</button>
  <Child v-model="isModalShown" />
</template>

<script setup>
  const isModalShown = ref(false);
</script>

and in the child:

VUECopied
<template>
  <MyModal v-model="isShown" />
</template>

<script setup>
  const isShown = defineModel('modelValue');

  function onClose() {
    isShown.value = false; // we can mutate the modelValue and the change will be emitted to the parent as an event, causing both components to update
  }
</script>

This is core functionality of the Vue framework, and things like defineEmits would probably be best reserved for cases where we need to invoke methods of a child component, not just update a ref's value to be in sync with the parent.