javascript - Ejecución de método secundario desde el componente principal en Vue.js

Question

Actualmente, tengo un componente Vue.js que contiene una lista de otros componentes. Sé que la forma más común de trabajar con vue es pasar datos a los niños y emitir eventos a los padres de los niños.

Sin embargo, en este caso, quiero ejecutar un método en los componentes secundarios cuando se hace clic en un botón del elemento principal . ¿Cuál sería la mejor manera de hacerlo?

Answer 1

Una forma sugerida es utilizar un centro global de eventos . Esto permite la comunicación entre cualquier componente que tenga acceso al concentrador.

Aquí hay un ejemplo que muestra cómo se puede usar un concentrador de eventos para activar un método en un componente secundario.

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

Puede crear el método de ayuda a continuación en los métodos en su componente principal:

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

Y llame al método del componente hijo de esta manera:

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

No lo pruebo para Vue> = 2.0