10. project [vuejs-08]: gebeurtenissen die onafhankelijk zijn van de componenthiërarchie, levenscyclus van componenten

Het project [vuejs-08] laat zien hoe componenten die niet direct met elkaar verbonden zijn in de componenthiërarchie toch via gebeurtenissen kunnen communiceren. De boomstructuur van het project [vuejs-08] is als volgt:

10.1. Het hoofdscript [main.js]

Het script [main.js] blijft hetzelfde als in de voorgaande voorbeelden.

10.2. Het script [even-bus.js]

Het script [event-bus.js] is de tool die we gaan gebruiken om gebeurtenissen te verzenden en te ontvangen:


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

Het script [event-bus] maakt alleen een instantie aan van de klasse [Vue] (regels 1-2) en exporteert deze (regel 3). De klasse [Vue] beschikt over twee methoden om gebeurtenissen te beheren:

[Vue].$emit(naam, gegevens): hiermee kan een gebeurtenis met de naam [nom] worden gegenereerd, gekoppeld aan de gegevens [donnée];
[Vue].$on(naam, fn): hiermee kan de gebeurtenis met de naam [nom] worden onderschept en door de functie [fn] worden verwerkt. De functie [fn] ontvangt als parameter de gegevens [donnée] die door de verzender aan de gebeurtenis zijn gekoppeld;

Dit gebeurtenisbeheer is niet gekoppeld aan de componenthiërarchie. Het is alleen nodig dat de componenten die op deze manier willen communiceren, dezelfde instantie van de klasse [Vue] gebruiken om gebeurtenissen te verzenden of te ontvangen. In ons voorbeeld gebruiken we de instantie [eventBus] die is gedefinieerd door het voorgaande script [event-bus.js].

10.3. De hoofdweergave [App.vue]

De code van de hoofdweergave [App] is als volgt:


<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>
      <!-- de drie componenten die via de gebeurtenis communiceren -->
      <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",
    // componenten
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

regels 8-10: de hoofdweergave [App] maakt gebruik van drie componenten [Component1, Component2, Component3] die via gebeurtenissen met elkaar communiceren. De drie componenten bevinden zich op hetzelfde niveau in de weergave [App]. Bovendien is er geen hiërarchische relatie tussen hen;

10.4. De component [Component1]

De code van de component [Component1] is als volgt:


<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",
    // status van de component
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // methoden voor gebeurtenisbeheer
    methods: {
      // gebeurtenisbeheer [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // beheer van de levenscyclus van de component
    // gebeurtenis [created] – de component is aangemaakt
    created() {
      // luisteren naar de gebeurtenis [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Opmerkingen

regels 4-6: een waarschuwing die de gegevens [data] uit regel 18 weergeeft. Deze gegevens worden geïnitialiseerd door de gebeurtenishandler [doSomething] uit regel 25. Deze handler wordt geactiveerd bij ontvangst van de gebeurtenis [someEvent] (regel 34). De waarschuwing wordt weergegeven afhankelijk van de waarde van het attribuut [showMsg] op regel 19. Dit attribuut wordt op zijn beurt ook ingesteld door de gebeurtenishandler [doSomething] op regel 25;
regel 32: de functie [created] is een gebeurtenishandler. Deze verwerkt de gebeurtenis [created], een gebeurtenis die tijdens de levenscyclus van de component wordt gegenereerd. Er zijn nog andere gebeurtenissen, zoals [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. De gebeurtenis [created] wordt gegenereerd wanneer de component is aangemaakt;
regel 12: de instantie [eventBus] van de klasse [Vue] wordt geïmporteerd;
regel 34: deze wordt gebruikt om te luisteren naar de gebeurtenis [someEvent]. Wanneer deze plaatsvindt, wordt de methode [doSomething] uit regel 25 aangeroepen;
regel 25: de methode [doSomething] ontvangt als parameter [data] de gegevens die de verzender van de gebeurtenis [someEvent] aan de gebeurtenis heeft gekoppeld;
regels 26-27: de status van de component wordt gewijzigd zodat de melding in de regels 4-6 de ontvangen gegevens weergeeft;

10.5. De component [Component2]

De component [Component2] is als volgt:


<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",
    // methoden voor gebeurtenisbeheer
    methods: {
      createEvent() {
        eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Opmerkingen

regel 3: een knop om een gebeurtenis aan te maken. Wanneer de gebruiker op deze knop klikt, wordt de methode [createEvent] uit regel 13 aangeroepen;
regel 8: de instantie [eventBus], gedefinieerd door het script [event-bus.js], wordt geïmporteerd;
regel 14: deze instantie wordt gebruikt om een gebeurtenis met de naam [someEvent] te genereren, gekoppeld aan de gegevens [{ x: 2, y: 4 }]. Uiteindelijk wordt, wanneer de gebruiker op de knop in regel 3 klikt, de gebeurtenis [someEvent] gegenereerd. Als we terugdenken aan de definitie van [Component1], zal deze gebeurtenis worden onderschept;

10.6. De component [Component3]

De code van deze component is als volgt:


<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 van de component
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // beheer van de gebeurtenis [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // beheer van de levenscyclus van de component
    // gebeurtenis [created] – de component is aangemaakt
    created() {
      // luisteren naar de gebeurtenis [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] is een kloon van [Component1]. Deze is alleen bedoeld om aan te tonen dat een gebeurtenis door meerdere componenten kan worden onderschept.