How to call function on child component on parent events

javascript

vue-refs

component-communication

event-bus

byAnton Shumikhin·Feb 15, 2025

Here's a quick solution to the query: assign a ref to the child component and use this ref to call its methods directly from the parent.

<!-- Parent Component -->
<template>
  <Child ref="childRef" />
  <button @click="invokeChild">Ping Child</button>
</template>

<script>
import { ref } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    // Setting up our walkie-talkie📞
    const childRef = ref(null);

    const invokeChild = () => {
      // Probing if the child is responsive
      if (childRef.value) {
        childRef.value.childMethod();
      }
    };

    return {
      childRef,
      invokeChild,
    };
  },
};
</script>

The child component may look something like this:

<!-- Child Component -->
<script setup>
import { defineExpose } from 'vue';

// Sorry if I'm loud, it's my function🎵
const childMethod = () => console.log('Child method, here!');
defineExpose({ childMethod });
</script>

The Parent can now call the Child's childMethod() every time the button is clicked. Now, the child is always listening!🔊

Deep dive into vue refs

While it is tempting to stop at this point, remember: knowledge grows smarter when shared. Let's explore some of the variations you can utilise in vue refs to run child functions from a parent component.

Accessing component methods using $refs

In Vue 2 or Vue 3 when using the Options API, this.$refs is your best friend for calling child component methods. Just make sure the ref attribute is assigned.

export default {
  methods: {
    parentFunction() {
      //You used to call me over my ref ☎️
      this.$refs.childRef.childFunction();
    }
  }
}

Reactive props to trigger child functions

Props being observed by child components can create opportunities to trigger its methods. Once the parent updates a prop value, a watcher in child breaks out a function.

<template>
  <!-- Sweet child o' Mine, your prop is coming -->
  <Child :some-prop="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Oh, hi Child, I have some news!'
    };
  }
}
</script>

And here's how the Child would react:

<script>
export default {
  props: ['someProp'],
  watch: {
    someProp(newValue) {
      this.childAction(newValue);
    }
  },
  methods: {
    childAction(propValue) {
      // Parent said whatttt?!💢
    }
  }
}
</script>

resolve communication with event bus

An event bus while now deprecated, shows how Vue has been there done that in offering solutions for parent-child component communication.

Public methods exposed by defineExpose

Here comes a hit from Vue 3's Composition API. Expose public methods with defineExpose.

Communication using $emit and $on

Vue's event system is quite a party. It allows child components to emit events while leaving their parents to choose whether to react or not. It's like paternal instincts on an electrical circuit, if you will.