Al trabajar con el framework Vue.js podemos dividir la lógica de las aplicaciones en componentes aislados e independientes; pero una cosa importante es la comunicación entre componentes.

En este post te mostraré cómo comunicar componentes usando $emit y $refs. En el primer caso usaremos $emit para comunicar al padre un evento, y en el segundo caso vamos a usar $refs para invocar a una función dentro del componente hijo.

Poniéndolo en otras palabras, primero veremos comunicación de componentes de hijo a padre, y después de padre a hijo. Gracias a esto vamos a llamar a una función de un componente desde otro componente usando Vue.js

Nota: esto funciona bien para componentes simples o para comunicación simple entre componentes; si quieres algo más complejo que involucre a más componentes puedes usar Vuex.

Comunicación hijo a padre

Para esto se utiliza $emit.

Veamos el primer caso en donde queremos informar al padre un evento. En mi caso mi componente se llama RegistrarAlumno, al guardar un alumno le informa al padre:

Invoco a $emit, el primer argumento es el nombre del evento y los siguientes argumentos son, valga la redundancia, argumentos que recibirá la función del padre.

En este caso estoy emitiendo el evento guardado y pasando el objeto alumno.

Dentro del padre utilizo el componente y espero el evento:

Fíjate en que estoy esperando el evento guardado con @guardado justo como se hace para escuchar, por ejemplo, @click.

Cuando el hijo me informe ese evento, llamaré a mi método llamado guardado dentro del padre, que está así:

Y así se hace la comunicación entre componente hijo a padre.

Notas sobre la comunicación componente hijo a padre

El componente hijo puede emitir varios eventos

Al emitir eventos no es necesario pasar datos, con el nombre del evento basta

Si el padre no escucha los eventos del hijo, no hay problema

Padre a hijo

Veamos ahora cómo invocar a una función de un componente hijo, desde el padre. Colocaré el ejemplo con el mismo componente.

Dentro del componente hijo tengo una función llamada saludo que recibe un argumento llamado nombre:

Tenemos, dentro del padre, al componente hijo. Pero ahora le he puesto un ref con el nombre de componente.

Ahora puedo invocar a cualquier método del componente usando $refs. Así:

No lo olvides: en este caso, componente es el ref del componente. Estoy invocando a la función saludo, que es un método dentro del componente hijo.

Por cierto, saludo recibe un argumento; pero podría recibir más, o podría no recibir argumentos.

Pasar datos al hijo

Ya vimos cómo comunicar componentes a través de funciones, pero para pasar atributos o valores a cada componente podemos usar las props en Vue.js.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: