Pasar datos entre componentes utilizando Vue.js Event Bus

La comunicación de componentes en Vue.js puede volverse complicada y desordenada a veces usando $emit y props. En aplicaciones del mundo real donde el árbol de componentes está anidado y es grande, no es conveniente pasar datos usando este método, ya que solo aumentará la complejidad de la aplicación y hará que la depuración sea muy tediosa. Aquí es donde entra en escena un autobús de eventos.

Un Event Bus no es más que una instancia global de Vue importada por los componentes involucrados en la comunicación y el paso de datos. Hace uso de las propiedades $on, $emit y $off del objeto Vue para emitir eventos y transmitir datos. Un bus de eventos proporciona una solución muy simple y elegante para la compleja string $emit y prop que puede ser muy difícil de rastrear durante las pruebas y la depuración. Actúa como un intermediario global para que todos los componentes involucrados emitan y escuchen eventos y ejecuten métodos en consecuencia.

Sintaxis:

No hay una sintaxis especial para un bus de eventos, ya que es solo una instanciación de la clase Vue.

const EventBus = new Vue();

Laboral: 

Considere este árbol de componentes simple donde necesitamos compartir datos entre los componentes negro y verde. Usando $emit y props, este será un proceso largo de pasar primero los datos y el evento a través del árbol usando $emit y luego hacia abajo del árbol usando props.

Sin embargo, utilizando un bus de eventos, esto se puede llevar a cabo de una manera muy sencilla y fácil.

Ejemplo: Usaremos el mismo ejemplo que hemos usado para ilustrar $emit y props aquí , sin embargo, esta vez usando un bus de eventos. Es una página web muy básica que muestra cuántas veces se ha hecho clic en un botón. Para ello, tenemos 2 componentes:

• Componente 1: muestra el número de veces que se ha hecho clic en el botón del componente 2.
• Component2: un botón que, cuando se hace clic en él, aumenta un contador.

<template>
<div>
  <Component1></Component1>
  <Component2></Component2>
</div>
</template>
  
<script>
  import Component1 from './components/Component1.vue'
  import Component2 from './components/Component2.vue'
  
  export default {
    name: 'App',
    components: {
      Component1,Component2
    }
  }
</script>

<template>
  <div class="component1">
    <h1>You have clicked {{ labeltext }} times</h1>
  </div>
</template>
  
<script>
  import EventBus from '../event-bus';
  
  export default {
    name: "Component1",
    data() {
      return {
        labeltext: 0,
      };
    },
    methods: {
      change_n(n) {
        this.labeltext = n;
      },
    },
    created() {
        // Sets up the Event Bus listener using 
        // the custom event name and assosciates
        // it with a component method.
        EventBus.$on("change_n", this.change_n);
      },
    destroyed() {
        // Removes Event Bus listener upon removal
        // of template from DOM.
        EventBus.$off("change_n", this.change_n);
      },
  };
</script>
  
<style scoped>
  .component1 {
    display: block;
    background-color: green;
    height: 15em;
    text-align: center;
    color: white;
    padding-top: 5em;
  }
</style>

<template>
  <div class="component2">
    <button @click="count">Click</button>
  </div>
</template>
  
<script>
  import EventBus from '../event-bus';
  
  export default {
    name: "Component2",
    data() {
      return {
        nclick : 0,
      };
    },
    methods: {
      count() {
        this.nclick += 1;
        // Emitting a custom-event via the Event Bus
        EventBus.$emit("change_n", this.nclick);
      },
    },
  };
</script>
  
<style scoped>
  .component2 {
    display: block;
    background-color: grey;
    height: 15em;
    text-align: center;
    padding-top: 5em;
  }
</style>

import Vue from 'vue';
  
// Create a new Vue instance and export it
const EventBus = new Vue();
  
export default EventBus;

Producción: