9. Projekt [vuejs-07]: Weiterleitung von Ereignissen in der Komponentenhierarchie

Die Projektstruktur sieht wie folgt aus:

9.1. Das Hauptskript [main.js]

Das Hauptskript [main.js] bleibt unverändert.

9.2. Die Hauptkomponente [App]

Der Code der Komponente [App] lautet wie folgt:

<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-07] : remontée d'événements dans la hiérarchie des composants</h4>
      </b-alert>
      <Component1 />
    </b-card>
  </div>
</template>

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

Die Komponente [App] verwendet eine neue Komponente [Component1] (Zeilen 7, 13, 17).

9.3. Die Komponente [Component11]

Der Code der Komponente [Component11] lautet wie folgt:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- Skript -->
<script>
  export default {
    name: "component11",
    // Methoden der Komponente
    methods: {
      // Verarbeitung des Ereignisses [click] auf der Schaltfläche
      createEvent() {
        // Es wird ein Ereignis ausgelöst, das mit einem Datenwert verknüpft ist
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Anmerkungen

• Zeilen 1–3: Die Komponente [Component11] enthält nur eine Schaltfläche, auf die man klicken kann. Wenn man darauf klickt, wird die Methode [createEvent] in den Zeilen 11–14 ausgeführt;
• Zeile 13: Jede Instanz von [Vue] verfügt über eine Methode [$emit], mit der ein Ereignis ausgelöst werden kann:
  • Der erste Parameter ist der Name des ausgelösten Ereignisses;
  • der zweite Parameter ist der Wert, der diesem Ereignis zugeordnet werden soll;
  • Das ausgelöste Ereignis wandert die Hierarchie der Komponenten hinauf, die über der Komponente [Component11] stehen. Es wandert so lange die Hierarchie hinauf, bis es eine Komponente findet, die bereit ist, es zu verarbeiten. Dieser Aufstieg beginnt bei der übergeordneten Komponente von [Component11];

9.4. Die Komponente [Component1]

Der Code der Komponente [Component1] lautet wie folgt:

<template>
  <b-row>
    <!-- Die Komponente, die das Ereignis auslöst -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- Von der Ereignisbehandlungsmethode angezeigte Meldung-->
    <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 Component11 from "./Component11";
  export default {
    name: "component1",
    // Komponenten
    components: {
      Component11
    },
    // Status der Komponente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // Ereignisbehandlungsmethoden
    methods: {
      doSomething(data) {
        // „data“ ist das Objekt, das dem Ereignis [someEvent] zugeordnet wurde
        this.data = data;
        // zeigt die Warnmeldung an
        this.showMsg = true;
      }
    }
  };
</script>

Visuelle Darstellung

Kommentare

• Zeile 5: [Component1] ist ein übergeordnetes Element von [Component11] und kann daher die von dieser Komponente ausgelösten Ereignisse „abhören“ (so lautet der Fachbegriff). Es ist bekannt, dass diese Komponente das Ereignis [someEvent] auslösen kann. Das Attribut [@someEvent="doSomething"] gibt an, dass, wenn das von [Component11] ausgelöste Ereignis [someEvent] eintritt, die Methode [doSomething] in Zeile 33 ausgeführt werden muss;
• Zeilen 9–11: Eine Meldung, die von der Methode [doSomething] angezeigt wird. Die Anzeige wird durch den booleschen Wert [showMsg] in Zeile 28 gesteuert. Die Warnmeldung zeigt das Attribut [data] aus Zeile 27 an;
• Zeile 33: Die Methode [doSomething], die ausgeführt wird, wenn das Ereignis [someEvent] in Zeile 5 eintritt, erhält als Parameter den diesem Ereignis zugeordneten Wert [data]. Dieser Parameter wird dem Attribut [data] in Zeile 27 zugewiesen, das in Zeile 11 angezeigt wird;
• Zeile 37: Das Attribut [showMsg] wird auf [true] gesetzt, um die Warnmeldung der Zeilen 9–11 anzuzeigen;

9.5. Ausführung des Projekts