10. Projekt [vuejs-08]: Von der Komponentenhierarchie unabhängige Ereignisse, Lebenszyklus der Komponente

Das Projekt [vuejs-08] veranschaulicht, wie Komponenten, die nicht direkt in der Komponentenhierarchie miteinander verknüpft sind, dennoch über Ereignisse kommunizieren können. Die Verzeichnisstruktur des Projekts [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 [event-bus.js]

Das Skript [event-bus.js] ist das Werkzeug, 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 einfach eine Instanz der Klasse [Vue] (Zeilen 1–2) und exportiert sie (Zeile 3). Die Klasse [Vue] verfügt über zwei Methoden zur Verarbeitung von Ereignissen:

[Vue].$emit(name, data): ermöglicht es Ihnen, ein Ereignis namens [name] auszulösen, das mit den Daten [data] verknüpft ist;
[Vue].$on(name, fn): ermöglicht es Ihnen, das Ereignis mit dem Namen [name] abzufangen und durch die Funktion [fn] verarbeiten zu lassen. Die Funktion [fn] erhält die mit dem Ereignis verbundenen Daten [data] von ihrem Emitter als Parameter;

Diese Ereignisbehandlung ist nicht an die Komponentenhierarchie gebunden. Komponenten, die auf diese Weise kommunizieren möchten, müssen lediglich dieselbe Instanz der Klasse [View] verwenden, um Ereignisse auszulösen bzw. auf sie zu warten. In unserem Beispiel verwenden wir die Instanz [eventBus], die im vorherigen Skript [event-bus.js] definiert wurde.

10.3. Die Hauptansicht [App.vue]

Der Code für die 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>
      <!-- les trois composants qui communiquent par évt -->
      <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",
    // composants
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

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

10.4. Die Komponente [Component1]

Der Code für die 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",
    // état du composant
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // méthodes de gestion des évts
    methods: {
      // gestion de l'evt [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestion du cycle de vie du composant
    // évt [created] - le composant a été créé
    created() {
      // écoute de l'évt [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Kommentare

Zeilen 4–6: Eine Warnmeldung, die die Daten [data] aus Zeile 18 anzeigt. Diese Daten werden durch den Ereignishandler [doSomething] in Zeile 25 initialisiert. Dieser Handler wird beim Empfang des Ereignisses [someEvent] (Zeile 34) ausgelöst. Die Meldung wird basierend auf dem Wert des Attributs [showMsg] in Zeile 19 angezeigt. Dieses Attribut wird ebenfalls vom Ereignisbehandler [doSomething] in Zeile 25 gesetzt;
Zeile 32: Die Funktion [created] ist ein Ereignisbehandler. Sie verarbeitet das Ereignis [created], das während des Lebenszyklus der Komponente ausgelöst wird. Es gibt weitere Ereignisse [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. Das Ereignis [created] wird ausgelöst, wenn die Komponente erstellt wurde;
Zeile 12: Die Instanz [eventBus] der Klasse [Vue] wird importiert;
Zeile 34: Sie wird verwendet, um auf das [someEvent]-Ereignis zu warten. Wenn dieses Ereignis eintritt, wird die Methode [doSomething] in Zeile 25 aufgerufen;
Zeile 25: Die Methode [doSomething] erhält die Daten, die der Auslöser des Ereignisses [someEvent] mit dem Ereignis verknüpft hat, als Parameter [data];
Zeilen 26–27: Der Zustand der Komponente wird aktualisiert, sodass 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>
<!-- script -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // méthodes de gestion des évts
    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] in 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 den Daten [{ 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 wir uns an die Definition von [Component1] erinnern, wird dieses Ereignis abgefangen;

10.6. Die Komponente [Component3]

Der Code für diese 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",
    // état du composant
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // gestion de l'evt [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestion du cycle de vie du composant
    // évt [created] - le composant a été créé
    created() {
      // écoute de l'évt [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

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