En la lección anterior aprendimos cómo emitir y escuchar eventos personalizados en Vue para enviar mensajes desde un componente «hijo» hacia el componente «padre» ¿Pero qué sucede si queremos enviar y recibir mensajes entre dos componentes que «hermanos» o que no están relacionados en lo absoluto? Esto es lo que aprenderemos a hacer en esta lección, utilizando un objeto de Vue adicional que nos servirá como un «Event Bus» o «Event Dispatcher» para toda nuestra aplicación.
Notas
Declaramos un objeto llamado EventBus, que simplemente va a ser un nuevo objeto VM. Este objeto nos va a permitir que un componente se comunique con otro:
var EventBus = new Vue;
También podrías enlazarlo al objeto window para que esté disponible de forma global en el proyecto:
window.event = new Vue;
En el método edit de nuestro componente app-task vamos a emitir un evento utilizando el EventBus. Este nuevo evento se llamará editing y le pasaremos como argumento la tarea que queremos editar:
...
edit: function () {
EventBus.$emit('editing', $this.index);
/***/
}
Dentro del componente app-task agregamos el método created y desde ahí escuchamos al evento editing:
...
created: function () {
EventBus.$on('editing', function (index) {
if (this.index != index) {
this.discard();
}
}.bind(this));
},
Una vez que este evento se emita o dispare ejecutamos una función que indica que queremos descartar la actualización de la tarea si el indice de la tarea actual es diferente al indice que estamos pasando como argumento.
Aprende a utilizar el método bind() de JavaScript.
De esta manera muy sencilla logramos comunicar todos los componentes de nuestra aplicación combinando los eventos personalizados con un objeto VM que hace las veces de «Event Bus» o «Event Dispatcher».
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Uso de eventos personalizados para comunicar componentes en Vue 2 Lección siguiente Introducción a vue-cli y webpack