Estoy usando Vue.Js v2. Quiero llamar a componente1->c1método en componente2->c2método para recargar datos después de enviar.
Vue.component('component1', { methods: { c1method: function(){ alert('this is c1method') }, } }) Vue.component('component2', { methods: { c2method: function(){ component('component1').c1method()//like this }, } })Para la relación que no es padre-hijo, entonces esto es lo mismo que este. Llame a un método, aparentemente a cualquier método de un componente de cualquier otro componente. Simplemente agregue una función $on a la instancia de $root y llame desde cualquier otro componente que acceda a $root y llame a la función $emit .
En primer componente
....
montado() {
this.$root.$on('componente1', () => {
// tu codigo va aqui
este método.c1()
}
}
y en el segundo componente llame a la función $emit en $root
...
c2método: función(){
this.$root.$emit('component1') //me gusta esto
},
Actúa más como un enchufe. Referencia aquí
// Component A Vue.component('A', { created() { this.$root.$refs.A = this; }, methods: { foo: function() { alert('this is A.foo'); } } }); // Component B Vue.component('B', { methods: { bar: function() { this.$root.$refs.A.foo(); } } });No hay necesidad de soluciones hacky.
En vuejs podemos crear eventos que se pueden escuchar globalmente.
Con esta función, siempre que queramos llamar a nuestra amada función, simplemente emitimos este evento.
Ahora, solo escuchamos este evento todo el tiempo desde el componente. cada vez que ocurra este evento global, podemos ejecutar nuestro método que queremos llamar.
Es bastante simple:
export const eventBus = new Vue(); // added line new Vue({ ... ... ... render: h => h(App) }).$mount('#app'); eventBus.$emit('fireMethod'); created() { eventBus.$on('fireMethod', () => { this.myBelovedMethod(); }) }No olvide importar eventBus en la parte superior.
import {eventBus} from "path/to/main.js";eso es todo, pocas líneas de código, sin trucos, todo el poder de vuejs.