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:

HTTP.post("/alumno", this.alumno)
.then(() => {
    this.$emit("guardado", this.alumno)//<-- Justo aquí
})
.finally(() => this.cargando = false);

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:

<RegistrarAlumno @guardado="guardado"/>

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í:

methods: {
  guardado(alumno) {
    // TODO: hacer algo con alumno
  },
}

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:

methods: {
    //...
    saludo(nombre){
        alert("Hola " + nombre);
    }
  //...
}

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

<RegistrarAlumno ref="componente"/>

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

this.$refs.componente.saludo("Luis");

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.