Site Loader
Comunicación entre componentes

En este artículo se aborda el tema de la comunicación de información entre componentes. En particular, se va ha hablar sobre la funcionalidad $emit que proporciona Vue.Js para comunicar información desde un componente hijo al padre.

Introducción

En el caso de que ya hayas realizado los tutoriales anteriores y además te hayas dedicado a investigar un poco sobre Vue. Seguramente te hayas encontrado con el problema de comunicar información o acciones desde un componente hijo al componente padre.

Para solucionar este problema, en Vue se utiliza el método $emit. El componente hijo que quiere comunicar información debe de ejecutar este método y el padre debe de estar escuchando un evento mediante un listener.

Código

El código que se presenta a continuación, es un ejemplo sencillo en el que un componente hijo tiene la información que el padre debe mostrar por un simple alert.

La funcionalidad principal que permite implementar la comunicación entre componentes se centra en dos puntos.

El primer punto es el botón «Speak» que contiene el componente hijo say. Cuando el usuario pulsa el botón se ejecuta el código siguiente:

@click="$emit('speak', this.message)"

El método $emit solo necesita un parámetro obligatorio, este parámetro es el nombre del evento que se ejecutará (speak). El segundo parámetro es opcional, en él se suele enviar información. En nuestro caso se transmite el mensaje que el usuario ha escrito en el input.

El segundo punto se encuentra en el componente padre en la parte del HTML. Cuando se inserta el componente <say …></say> se ha definido el siguiente código como atributo:

v-on:speak="speakMethod($event)

Por lo tanto, cuando desde un hijo se emite sobre el evento speak el componente padre puede capturarlo y asociarle una lógica. En nuestro caso, se envía el evento a un método (speakMethod) el cual se encarga de mostrarlo por pantalla mediante un alert.

Conclusiones

Algún lector un poco más experimentado se puede ver tentado a utilizar el store de vuex para compartir información entre componentes. Esta opción no la recomiendo bajo ningún concepto en el caso que estamos tratando, sobre todo porque la complejidad que añade al código no es necesaria! Además, esto puede generar bugs si no se sabe muy bien lo que estamos haciendo.

Con esto no digo que no se pueda utilizar el store para comunicar información. Sin embargo, debe de ser la última opción y hay que tener bastante cuidado en controlar el flujo de los datos a través de nuestros componentes.

Por lo tanto, la funcionalidad descrita en el artículo es la opción perfecta cuando tienes que comunicar información o acciones desde un componente hijo al componente padre.

Compartir en redes sociales:

Post Author: Vicente Javier González Llobet

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

LinkedIn
Share