10. Progetto [vuejs-08]: Eventi indipendenti dalla gerarchia dei componenti, ciclo di vita dei componenti

Il progetto [vuejs-08] mostra come componenti non collegati direttamente nella gerarchia dei componenti possano comunque comunicare tramite eventi. La struttura delle directory del progetto [vuejs-08] è la seguente:

10.1. Lo script principale [main.js]

Lo script [main.js] rimane lo stesso degli esempi precedenti.

10.2. Lo script [even-bus.js]

Lo script [event-bus.js] è lo strumento che useremo per emettere e ascoltare gli eventi:


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

Lo script [event-bus] crea semplicemente un'istanza della classe [Vue] (righe 1–2) e la esporta (riga 3). La classe [Vue] dispone di due metodi per la gestione degli eventi:

[Vue].$emit(name, data): consente di emettere un evento denominato [name] associato ai dati [data];
[Vue].$on(name, fn): consente di intercettare l'evento denominato [name] e di farlo elaborare dalla funzione [fn]. La funzione [fn] riceverà come parametro i dati [data] associati all'evento dal suo emittente;

Questa gestione degli eventi non è legata alla gerarchia dei componenti. I componenti che desiderano comunicare in questo modo devono semplicemente utilizzare la stessa istanza della classe [View] per emettere/ascoltare gli eventi. Nel nostro esempio, useremo l'istanza [eventBus] definita dallo script [event-bus.js] precedente.

10.3. La vista principale [App.vue]

Il codice per la vista principale [App] è il seguente:


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

righe 8–10: la vista principale [App] utilizza tre componenti [Component1, Component2, Component3] che comunicheranno tramite eventi. I tre componenti si trovano allo stesso livello all'interno della vista [App]. Inoltre, non vi sarà alcuna relazione gerarchica tra loro;

10.4. Il componente [Component1]

Il codice per il componente [Component1] è il seguente:


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

Commenti

Righe 4–6: Un avviso che visualizza i dati [data] della riga 18. Questi dati saranno inizializzati dal gestore di eventi [doSomething] alla riga 25. Questo gestore viene attivato alla ricezione dell'evento [someEvent] (riga 34). L'avviso viene visualizzato in base al valore dell'attributo [showMsg] alla riga 19. Anche questo attributo viene impostato dal gestore di eventi [doSomething] alla riga 25;
riga 32: la funzione [created] è un gestore di eventi. Gestisce l'evento [created], un evento emesso durante il ciclo di vita del componente. Ce ne sono altri [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. L'evento [created] viene emesso quando il componente è stato creato;
riga 12: viene importata l'istanza [eventBus] della classe [Vue];
riga 34: viene utilizzata per ascoltare l'evento [someEvent]. Quando si verifica questo evento, viene chiamato il metodo [doSomething] alla riga 25;
riga 25: il metodo [doSomething] riceve i dati che l'emittente dell'evento [someEvent] ha associato all'evento come parametro [data];
righe 26–27: lo stato del componente viene aggiornato in modo che l'avviso nelle righe 4–6 visualizzi i dati ricevuti;

10.5. Il componente [Component2]

Il componente [Component2] è il seguente:


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

Commenti

riga 3: un pulsante per creare un evento. Quando l'utente fa clic su questo pulsante, viene chiamato il metodo [createEvent] alla riga 13;
riga 8: viene importata l'istanza [eventBus] definita dallo script [event-bus.js];
riga 14: questa istanza viene utilizzata per emettere un evento denominato [someEvent] associato ai dati [{ x: 2, y: 4 }]. In definitiva, quando l'utente fa clic sul pulsante alla riga 3, viene emesso l'evento [someEvent]. Se ricordiamo la definizione di [Component1], questo intercetterà l'evento;

10.6. Il componente [Component3]

Il codice per questo componente è il seguente:


<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] è un clone di [Component1]. È presente solo per dimostrare che un evento può essere intercettato da più componenti.