Executing child method from parent component in Vue.js

Question

Currently, I have a Vue.js components which contains a list of other components. I know that the common way of working with vue is passing data to children, and emitting events to parents from children.

However, in this case I want to execute a method in the children components when a button in the parent is clicked. Which would be the best way to do it?

Answer 1

One suggested way is to use a global event hub . This allows communication between any components that have access to the hub.

Here is an example showing how an event hub can be used to fire a method on a child component.

 var eventHub = new Vue(); Vue.component('child-component', { template: "<div>The 'clicked' event has been fired {{count}} times</div>", data: function() { return { count: 0 }; }, methods: { clickHandler: function() { this.count++; } }, created: function() { // We listen for the event on the eventHub eventHub.$on('clicked', this.clickHandler); } }); new Vue({ el: '#app', methods: { clickEvent: function() { // We emit the event on the event hub eventHub.$emit('clicked'); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> <div id="app"> <button @click="clickEvent">Click me to emit an event on the hub!</button> <child-component></child-component> </div>

Answer 2

这是一个对我有用的简单的

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

Answer 3

You can create below helper method in methods in your parent component:

getChild(name) {
    for(let child of this.$children) if (child.$options.name==name) return child;
},

And call child component method in this way:

this.getChild('child-component-tag-name').childMethodName(arguments);

I don't test it for Vue>=2.0