Vue.js – Cómo llamar al método desde otro componente

Este grupo de trabajo ha pasado horas investigando respuestas a tu pregunta, te compartimos la respuesta por esto nuestro deseo es que te resulte de gran apoyo.

Solución:

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. Solo agrega un $on función a la $root instancia y llamar desde cualquier otro componente que acceda al $root y llamando $emit función.

En primer componente

    ....
    mounted() 
        this.$root.$on('component1', () => 
            // your code goes here
            this.c1method()
        
    

y en el segundo componente llamar al $emit función en $root

    ...
    c2method: function()
     this.$root.$emit('component1') //like this
    ,

Actúa más como un enchufe. Referencia aquí

https://stackoverflow.com/a/50343039/6090215

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:

1. vas a main.js, antes de crear la instancia de vue, escribe esto:

export const eventBus = new Vue(); // added line


new Vue(
    ...
    ...
    ...
    render: h => h(App)
).$mount('#app');

2. En cualquier lugar que queramos activar la función de destino, no la activamos, simplemente emitimos este evento:

eventBus.$emit('fireMethod');

3. Ahora, en nuestro componente que tiene la función de destino, siempre escuchamos este evento:

created() 
    eventBus.$on('fireMethod', () => 
            this.myBelovedMethod();
    )

No olvide importar eventBus en la parte superior.

import eventBus from "path/to/app.js";

eso es todo, pocas líneas de código, sin trucos, todo el poder de vuejs.

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

Recuerda compartir este ensayo si te valió la pena.

---

---

Utiliza Nuestro Buscador