10. Proyecto [vuejs-08]: eventos independientes de la jerarquía de componentes, ciclo de vida de los componentes

El proyecto [vuejs-08] muestra cómo los componentes que no están directamente relacionados en la jerarquía de componentes pueden, no obstante, comunicarse a través de eventos. El árbol del proyecto [vuejs-08] es el siguiente:

10.1. El script principal [main.js]

El script [main.js] sigue siendo el mismo que en los ejemplos anteriores.

10.2. El script [even-bus.js]

El script [event-bus.js] es la herramienta que vamos a utilizar para emitir y escuchar eventos:


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

El script [event-bus] se limita a crear una instancia de la clase [Vue] (líneas 1-2) y a exportarla (línea 3). La clase [Vue] dispone de dos métodos para gestionar los eventos:

[Vue].$emit(nombre, dato): permite emitir un evento denominado [nom] y asociado al dato [donnée];
[Vue].$on(nombre, fn): permite interceptar el evento denominado [nom] y hacer que sea procesado por la función [fn]. La función [fn] recibirá como parámetro el dato [donnée] asociado al evento por su emisor;

Esta gestión de eventos no está vinculada a la jerarquía de componentes. Basta con que los componentes que deseen comunicarse de esta manera utilicen la misma instancia de la clase [Vue] para emitir/escuchar los eventos. En nuestro ejemplo, utilizaremos la instancia [eventBus] definida por el script [event-bus.js] anterior.

10.3. La vista principal [App.vue]

El código de la vista principal [App] es el siguiente:


<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-08] : événements indépendants de la hiérarchie des composants, cycle de vie des composants</h4>
      </b-alert>
      <!-- los tres componentes que se comunican mediante eventos -->
      <Component1 />
      <Component3 />
      <Component2 />
    </b-card>
  </div>
</template>

<script>
  import Component1 from "./components/Component1";
  import Component2 from "./components/Component2";
  import Component3 from "./components/Component3";
  export default {
    name: "app",
    // componentes
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

líneas 8-10: la vista principal [App] utiliza tres componentes [Component1, Component2, Component3] que se comunicarán mediante eventos. Los tres componentes se encuentran al mismo nivel en la vista [App]. Además, no habrá relación jerárquica entre ellos;

10.4. El componente [Component1]

El código del componente [Component1] es el siguiente:


<template>
  <b-row>
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Evénement [someEvent] intercepté par [Component1]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  import eventBus from "../event-bus.js"
  export default {
    name: "component1",
    // estado del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // métodos de gestión de eventos
    methods: {
      // gestión del evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestión del ciclo de vida del componente
    // evento [created]: se ha creado el componente
    created() {
      // escucha del evento [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Comentarios

líneas 4-6: una alerta que muestra el dato [data] de la línea 18. Este dato será inicializado por el gestor de eventos [doSomething] de la línea 25. Este gestor se activa al recibir el evento [someEvent] (línea 34). La alerta se muestra en función del valor del atributo [showMsg] de la línea 19. Este atributo también es establecido por el gestor de eventos [doSomething] de la línea 25;
línea 32: la función [created] es un gestor de eventos. Gestiona el evento [created], un evento emitido durante el ciclo de vida del componente. Existen otros, como [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. El evento [created] se emite cuando se ha creado el componente;
línea 12: se importa la instancia [eventBus] de la clase [Vue];
línea 34: se utiliza para escuchar el evento [someEvent]. Cuando este se produce, se invoca el método [doSomething] de la línea 25;
línea 25: el método [doSomething] recibe como parámetro [data] los datos que el emisor del evento [someEvent] ha asociado al evento;
líneas 26-27: se modifica el estado del componente para que la alerta de las líneas 4-6 muestre los datos recibidos;

10.5. El componente [Component2]

El componente [Component2] es el siguiente:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- script -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // métodos de gestión de eventos
    methods: {
      createEvent() {
        eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Comentarios

línea 3: un botón para crear un evento. Cuando el usuario hace clic en este botón, se llama al método [createEvent] de la línea 13;
línea 8: se importa la instancia [eventBus] definida por el script [event-bus.js];
línea 14: esta instancia se utiliza para emitir un evento denominado [someEvent] asociado al dato [{ x: 2, y: 4 }]. Finalmente, cuando el usuario hace clic en el botón de la línea 3, se emite el evento [someEvent]. Si recordamos la definición de [Component1], este interceptará dicho evento;

10.6. El componente [Component3]

El código de este componente es el siguiente:


<template>
  <b-row>
    <b-col>
      <b-alert show
               v-if="showMsg">Evénement [someEvent] intercepté par [Component3]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  import eventBus from "../event-bus.js"
  export default {
    name: "component3",
    // estado del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // gestión del evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestión del ciclo de vida del componente
    // evento [created]: se ha creado el componente
    created() {
      // escucha del evento [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] es un clon de [Component1]. Solo está ahí para mostrar que un evento puede ser interceptado por varios componentes.