9. project [vuejs-07]: doorgeven van gebeurtenissen in de componenthiërarchie

De projectstructuur is als volgt:

9.1. Het hoofdscript [main.js]

Het hoofdscript [main.js] blijft ongewijzigd.

9.2. De hoofdcomponent [App]

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

<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>

De component [App] maakt gebruik van een nieuwe component [Component1] (regels 7, 13, 17).

9.3. De component [Component11]

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

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- script -->
<script>
  export default {
    name: "component11",
    // methoden van de component
    methods: {
      // afhandeling van de gebeurtenis [click] op de knop
      createEvent() {
        // er wordt een gebeurtenis verzonden die gekoppeld is aan gegevens
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Opmerkingen

• regels 1-3: de component [Component11] bevat slechts één knop waarop kan worden geklikt. Wanneer hierop wordt geklikt, wordt de methode [createEvent] van de regels 11-14 uitgevoerd;
• regel 13: elke instantie van [Vue] beschikt over een methode [$emit] waarmee een gebeurtenis kan worden geactiveerd:
  • de eerste parameter is de naam van de verzonden gebeurtenis;
  • de tweede parameter is de gegevens die aan deze gebeurtenis moeten worden gekoppeld;
  • de verzonden gebeurtenis wordt doorgegeven in de hiërarchie van componenten die boven de component [Component11] staan. De gebeurtenis wordt doorgegeven totdat er een component wordt gevonden die bereid is deze te verwerken. Dit doorgeven begint bij de bovenliggende component van [Component11];

9.4. De component [Component1]

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

<template>
  <b-row>
    <!-- de component die de gebeurtenis activeert -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- bericht dat wordt weergegeven door de methode voor gebeurtenisafhandeling-->
    <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",
    // componenten
    components: {
      Component11
    },
    // status van de component
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // methoden voor gebeurtenisafhandeling
    methods: {
      doSomething(data) {
        // data is het object dat is gekoppeld aan de gebeurtenis [someEvent]
        this.data = data;
        // geeft de waarschuwing weer
        this.showMsg = true;
      }
    }
  };
</script>

Visuele weergave

Opmerkingen

• regel 5: [Component1] is de bovenliggende component van [Component11] en kan dus ‘luisteren’ (dat is de term) naar de gebeurtenissen die door deze component worden verzonden. We weten dat deze component de gebeurtenis [someEvent] kan verzenden. Het attribuut [@someEvent="doSomething"] geeft aan dat, als de gebeurtenis [someEvent] die door [Component11] wordt verzonden, plaatsvindt, de methode [doSomething] op regel 33 moet worden uitgevoerd;
• regels 9-11: een bericht dat wordt weergegeven door de methode [doSomething]. De weergave ervan wordt geregeld door de booleaanse variabele [showMsg] op regel 28. De waarschuwing toont het attribuut [data] op regel 27;
• regel 33: de methode [doSomething], die wordt uitgevoerd wanneer de gebeurtenis [someEvent] plaatsvindt (regel 5), ontvangt als parameter de waarde [data] die aan deze gebeurtenis is gekoppeld. Deze parameter wordt toegewezen aan het attribuut [data] op regel 27, dat wordt weergegeven door regel 11;
• regel 37: het attribuut [showMsg] wordt ingesteld op [true] om de waarschuwing van de regels 9-11 weer te geven;

9.5. Uitvoering van het project