Is there any way to trigger component method from parent in VueJS?

Question

I have been searching for information and have only found a way to emit events from child components which can be then listened for in parent components. Is there any way to call a child method from parent component?

Answer 1

Yup, just find your component in children array, or grab it by ref attribute, and call method :) ref doc

lets assume that your child component has method x. According to documentation:

<div id="parent">   <user-profile ref="profile"></user-profile> </div>  var child = this.$refs.profile; child.x(); 

Answer 2

I think a good pattern for this is emitting an event from the parent component and listening to it in the child component, using an Event Bus.

That would be:

in main.js

export const bus = new Vue() 

in Parent.vue:

import {bus} from 'path/to/main'  // Where you wanna call the child's method: bus.$emit('customEventName', optionalParameter) 

in Child.vue:

import {bus} from 'path/to/main'  // Add this to the mounted() method in your component options object: bus.$on('customEventName', this.methodYouWannaCall)