Uso de Event Bus para compartir accesorios entre componentes de Vue

De forma predeterminada, la comunicación entre los componentes de Vue se produce mediante el uso de accesorios. Los accesorios son propiedades que se pasan de un componente principal a un componente secundario. Por ejemplo, aquí hay un componente donde titlehay un accesorio:

blog-post/blog-post

Las propiedades siempre se pasan del componente principal al componente secundario. A medida que la complejidad de la aplicación aumenta, se llega lentamente a lo que se denomina perforación de propiedades (aquí hay un artículo relacionado que se centra en React, pero que se aplica totalmente). La perforación de propiedades es la idea de pasar propiedades una y otra vez a los componentes secundarios y, como se puede imaginar, generalmente es un proceso tedioso.

Por lo tanto, la tediosa perforación de puntas puede ser un problema potencial complejo. El otro tiene que ver con la comunicación entre componentes no relacionados. Podemos abordar todo esto haciendo uso de un Bus de Eventos .

¿Qué es un autobús de eventos? Bueno, se resume en el propio nombre. Es un modo de transporte para que un componente pase accesorios de un componente a otro, sin importar dónde se encontrarán esos componentes en el árbol.

Tarea práctica: construir un mostrador

Construimos algo juntos para demostrar el concepto de autobús de eventos. Un contador que suma o resta un valor enviado y suma el total general es un buen lugar para comenzar:

Para utilizar un bus de eventos, primero debemos inicializarlo así:

import Vue from 'vue';const eventBus = new Vue();

Esto establece una instancia de Vue en eventBus. Puedes nombrarlo como quieras, como sea. Si está utilizando un componente de un solo archivo, entonces debería tener el fragmento en un archivo separado, ya que tendrá que exportar la instancia de Vue asignada de eventBustodos los modos:

import Vue from 'vue';export const eventBus = new Vue();

Una vez hecho esto, podemos comenzar a utilizarlo en nuestro componente de contador.

Esto es lo que queremos hacer:

• Queremos tener un recuento con un valor inicial de 0.
• Queremos un campo de entrada que acepte valores numéricos.
• Queremos dos botones: uno que agregará el valor numérico enviado al recuento cuando se haga clic y el otro para restablecer ese valor numérico enviado del recuento cuando se haga clic.
• Queremos una confirmación de lo que pasó cuando cambie el cuento.

Así es como se ve la plantilla con cada uno de esos elementos en su lugar:

div  h2Counter/h2  h2{{ count }}/h2  input type="number" v-model="entry" /  div    button @click.prevent="handleIncrement"      Increment    /button    button @click.prevent="handleDecrement"      Decrement    /button  /div  p{{ text }}/p/div

Vinculamos el campo de entrada a un valor llamado entry, que usaremos para aumentar o disminuir el recuento, según lo que ingrese el usuario. Cuando se hace clic en cualquiera de los botones, activamos un método que debería aumentar o disminuir el valor del recuento. Finalmente, lo {{ text }}que contiene la petiqueta es el mensaje que imprimiremos y que reanudará el cambio en el recuento.

Así es como todo esto se combina en nuestro guión:

new Vue({  el: '#app',  data() {    return {      count: 0,      text: '',      entry: 0    }  },  created() {    eventBus.$on('count-incremented', () = {      this.text = `Count was increased`      setTimeout(() = {        this.text = '';      }, 3000);    })    eventBus.$on('count-decremented', () = {      this.text = `Count was decreased`      setTimeout(() = {        this.text = '';      }, 3000);    })  },  methods: {    handleIncrement() {      this.count += parseInt(this.entry, 10);      eventBus.$emit('count-incremented')      this.entry = 0;    },    handleDecrement() {      this.count -= parseInt(this.entry, 10);      eventBus.$emit('count-decremented')      this.entry = 0;    }  }})

Quizás hayas notado que estamos a punto de subirnos al autobús de eventos al mirar ese código.

Lo primero que debemos hacer es establecer una ruta para enviar un evento de un componente a otro. Podemos allanar ese camino usando eventBus.$emit()(siendo emitir una palabra elegante para enviar). Ese envío se incluye en dos métodos, handleIncrementy handleDecrementque escuche los envíos de entrada. Y, una vez que sucede, nuestro autobús de eventos corre hacia cualquier componente que solicite datos y envíe los accesorios.

Es posible que hayas notado que estamos escuchando ambos eventos en el created()gancho de ciclo de vida usando eventBus.$on(). En ambos eventos, tenemos que pasar la cadena que corresponde al evento que emitimos. Esto es como un identificador para el evento en particular y lo que establece una forma para que un componente reciba datos. Cuando eventBusreconoce un evento en particular que se ha anunciado, se llama a la función que sigue y establecemos un texto para mostrar lo que sucedió y hacer que desaparezca después de tres segundos.

Tarea práctica: manejo de múltiples componentes

Digamos que estamos trabajando en una página de perfil donde los usuarios pueden actualizar su nombre y dirección de correo electrónico para una aplicación y luego ver la actualización sin actualizar la página. Esto se puede lograr sin problemas utilizando el bus de eventos, aunque esta vez estamos tratando con dos componentes: el perfil de usuario y el formulario que envía cambios de perfil.

Aquí está la plantilla:

div  div    h2Profile/h2    div      pName: {{name}}/p      pEmail: {{ email }}/p    /div  /div  div    h2Enter your details below:/h2    form @submit.prevent="handleSubmit"      div        labelName:/label        input type="text" v-model="user.name" /      /div      div        labelEmail:/label        input type="text" v-model="user.email" /      /div      buttonSubmit/button    /form  /div/div

Pasaremos el ids( user.namey user.email) al componente correspondiente. Primero, configuramos la plantilla para el edit__profilecomponente Editar perfil ( ), que contiene el nombre y los datos de correo electrónico que queremos pasar al componente Perfil que configuraremos a continuación. Nuevamente, hemos establecido un bus de eventos para emitir esos datos después de que detecta que se ha producido un evento de envío.

new Vue({  el: "#edit__profile",  data() {    return {      user: {        name: '',        email: ''      }    }  },  methods: {    handleSubmit() {      eventHub.$emit('form-submitted', this.user)      this.user = {}    }  }})

Estos datos se utilizarán para actualizar reactivamente el perfil del usuario en el profilecomponente Perfil ( ), que busca namey emailentra cuando el autobús llega a su centro.

new Vue({  el: '#profile',  data() {    return {      name: '',      email: ''    }  },  created() {    eventHub.$on('form-submitted', ({ name, email}) = {      this.name = name;      this.email = email    })  }})

Sus maletas están hechas. Ahora todo lo que tienen que hacer es regresar a casa.

Bastante genial, ¿verdad? Aunque los componentes Editar perfil y Perfil no están relacionados (o no tienen una relación directa entre padre e hijo), es posible que se comuniquen entre sí, vinculados por el mismo evento.

Rodando a lo largo

He encontrado útil Event Bus en los casos en los que quiero habilitar la reactividad en mi aplicación, específicamente, para actualizar un componente en función de la respuesta obtenida del servidor sin que la página se actualice. También es posible que más de un componente pueda escuchar el evento que se emite.

Si tienes otros escenarios interesantes sobre el uso del bus de eventos, me encantaría conocerlos en los comentarios.