Saltar al contenido

¿Cómo puedo llamar al método en otro componente en vue.js 2?

Si encuentras algo que no comprendes puedes comentarlo y trataremos de ayudarte lo más rápido posible.

Solución:

No hay dos componentes que no tengan una relación padre/hijo. Todos están conectados a través de la instancia de root vue. Para acceder a la instancia de root vue simplemente llame this.$root y obtienes la instancia raíz.

    ....
    .then((response) => 
        this.$root.$emit('createImage', item, response)
    );

y en el segundo componente, haga la función que debe activarse

    ...
    mounted() 
        this.$root.$on('createImage', (item, response) => 
            // your code goes here
        )
    

Actúa más como un enchufe. El evento estará disponible a nivel mundial, debido a $root.

nótese bien agregar la instancia de vue al objeto de ventana global es una mala práctica

Si estos 2 componentes son hermanos (sin padre ni hijo), entonces una solución es usar el bus de eventos.

La idea general es construir un controlador de eventos global así: en main.js

window.Event = new Vue();

Luego, en su primer componente, active un evento:

....
.then((response) => 
     Event.$emit('createImage', item, response)
);

y en el segundo componente registre un controlador para escuchar createImage evento en mounted() gancho:

...
mounted() 
    Event.$on('createImage', (item, response) => 
        // your code goes here
    

Puede encontrar más información leyendo este tutorial y viendo este screencast.

Si entiendes que ha sido de utilidad este post, sería de mucha ayuda si lo compartes con el resto programadores de esta forma nos ayudas a difundir nuestro contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *