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

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


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();


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)


Here is a simple one

this.$children[indexOfComponent].childsMethodName();