10. Projekt [vuejs-08]: Ereignisse unabhängig von der Komponentenhierarchie, Lebenszyklus der Komponenten

Das Projekt [vuejs-08] zeigt, wie Komponenten, die in der Komponentenhierarchie nicht direkt miteinander verbunden sind, dennoch über Ereignisse kommunizieren können. Die Projektstruktur von [vuejs-08] sieht wie folgt aus:

10.1. Das Hauptskript [main.js]

Das Skript [main.js] bleibt unverändert gegenüber den vorherigen Beispielen.

10.2. Das Skript [even-bus.js]

Das Skript [event-bus.js] ist das Tool, das wir zum Auslösen und Abhören von Ereignissen verwenden werden:


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

Das Skript [event-bus] erstellt lediglich eine Instanz der Klasse [Vue] (Zeilen 1–2) und exportiert diese (Zeile 3). Die Klasse [Vue] verfügt über zwei Methoden zur Verwaltung von Ereignissen:

[Vue].$emit(name, data): Ermöglicht das Auslösen eines Ereignisses mit dem Namen [nom], das mit dem Datenelement [donnée] verknüpft ist;
[Vue].$on(name, fn): Ermöglicht es, das Ereignis mit dem Namen [nom] abzufangen und es von der Funktion [fn] verarbeiten zu lassen. Die Funktion [fn] erhält als Parameter den Wert [donnée], der dem Ereignis von seinem Sender zugeordnet wurde;

Diese Ereignisverwaltung ist nicht an die Komponentenhierarchie gebunden. Es reicht aus, dass die Komponenten, die auf diese Weise kommunizieren möchten, dieselbe Instanz der Klasse [Vue] verwenden, um Ereignisse auszulösen bzw. zu abhören. In unserem Beispiel verwenden wir die Instanz [eventBus], die durch das vorherige Skript [event-bus.js] definiert wurde.

10.3. Die Hauptansicht [App.vue]

Der Code der Hauptansicht [App] lautet wie folgt:


<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>
      <!-- die drei Komponenten, die über das Ereignis kommunizieren -->
      <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",
    // Komponenten
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

Zeilen 8–10: Die Hauptansicht [App] verwendet drei Komponenten [Component1, Component2, Component3], die über Ereignisse miteinander kommunizieren. Die drei Komponenten befinden sich in der Ansicht [App] auf derselben Ebene. Außerdem besteht zwischen ihnen keine hierarchische Beziehung;

10.4. Die Komponente [Component1]

Der Code der Komponente [Component1] lautet wie folgt:


<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",
    // Komponentenstatus
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // Methoden zur Ereignisverwaltung
    methods: {
      // Ereignisbehandlung [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // Lebenszyklusverwaltung der Komponente
    // Ereignis [created] – Die Komponente wurde angelegt
    created() {
      // Abhören des Ereignisses [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Anmerkungen

Zeilen 4–6: Eine Warnmeldung, die den Wert [data] aus Zeile 18 anzeigt. Dieser Wert wird durch den Ereignishandler [doSomething] aus Zeile 25 initialisiert. Dieser Handler wird beim Empfang des Ereignisses [someEvent] (Zeile 34) aktiviert. Die Warnmeldung wird abhängig vom Wert des Attributs [showMsg] in Zeile 19 angezeigt. Dieses Attribut wird ebenfalls durch den Ereignisbehandler [doSomething] in Zeile 25 gesetzt;
Zeile 32: Die Funktion [created] ist ein Ereignisbehandler. Sie verarbeitet das Ereignis [created], das im Laufe des Lebenszyklus der Komponente ausgelöst wird. Es gibt noch weitere Ereignisse wie [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. Das Ereignis [created] wird ausgelöst, wenn die Komponente angelegt wurde;
Zeile 12: Die Instanz [eventBus] der Klasse [Vue] wird importiert;
Zeile 34: Sie wird verwendet, um auf das Ereignis [someEvent] zu warten. Wenn dieses Ereignis eintritt, wird die Methode [doSomething] aus Zeile 25 aufgerufen;
Zeile 25: Die Methode [doSomething] erhält als Parameter [data] die Daten, die der Auslöser des Ereignisses [someEvent] dem Ereignis zugeordnet hat;
Zeilen 26–27: Der Status der Komponente wird so geändert, dass die Warnmeldung in den Zeilen 4–6 die empfangenen Daten anzeigt;

10.5. Die Komponente [Component2]

Die Komponente [Component2] sieht wie folgt aus:


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

Kommentare

Zeile 3: Eine Schaltfläche zum Erstellen eines Ereignisses. Wenn der Benutzer auf diese Schaltfläche klickt, wird die Methode [createEvent] aus Zeile 13 aufgerufen;
Zeile 8: Die durch das Skript [event-bus.js] definierte Instanz [eventBus] wird importiert;
Zeile 14: Diese Instanz wird verwendet, um ein Ereignis namens [someEvent] auszulösen, das mit dem Datenelement [{ x: 2, y: 4 }] verknüpft ist. Wenn der Benutzer schließlich auf die Schaltfläche in Zeile 3 klickt, wird das Ereignis [someEvent] ausgelöst. Wenn man sich an die Definition von [Component1] erinnert, wird dieses Ereignis von dieser Instanz abgefangen;

10.6. Die Komponente [Component3]

Der Code dieser Komponente lautet wie folgt:


<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",
    // Status der Komponente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // Verwaltung des Ereignisses [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // Lebenszyklusverwaltung der Komponente
    // Ereignis [created] – die Komponente wurde angelegt
    created() {
      // Abhören des Ereignisses [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] ist ein Klon von [Component1]. Er dient lediglich dazu, zu veranschaulichen, dass ein Ereignis von mehreren Komponenten abgefangen werden kann.