Conectar componentes con Eventos en Vuejs 2

Aprende a conectar componentes con Eventos en Vuejs 2 para que puedan estar a la escucha de cuando algo suceda en tu app.

En esta entrada vamos a ver cómo conectar componentes entre sí. La idea es poder actuar desde cualquier lugar cuando algo pase en nuestra aplicación.

Para este propósito existen los eventos que ya conocemos, gracias a $emit, $on y $once podemos emitir y recibir. El problema es que por defecto sólo podemos recibir esos eventos en la misma instancia de Vue, por lo tanto, si emitimos un evento en un componente que no está participando en la "fiesta" no tendremos acceso a lo que ha sucedido.

Bus de Eventos global en Vuejs 2

Lo primero que debemos hacer es crear un bus de eventos global de la siguiente forma:

A partir de este momento ya podemos acceder a $bus desde cualquier componente de nuestra aplicación. Por lo tanto, desde cualquier componente podríamos emitir eventos de la siguiente forma:

Una vez hemos emitido un evento utilizando nuestro propio bus de eventos lo único que necesitamos es estar a la escucha de ese evento de la siguiente forma:

Ahora cada vez que se ejecute el evento userRegistered a través de nuestro bus de eventos seremos capaces de actuar en consecuencia.

Fíjate que hemos utilizado el hook beforeDestroy para eliminar la escucha del evento, es importante hacerlo si no queremos tener problemas de rendimiento en nuestra aplicación.