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

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

10.1. Lo script principale [main.js]

Lo script [main.js] rimane invariato rispetto agli esempi precedenti.

10.2. Lo script [even-bus.js]

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


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

Lo script [event-bus] si limita a creare un'istanza della classe [Vue] (righe 1-2) e a esportarla (riga 3). La classe [Vue] dispone di due metodi per gestire gli eventi:

[Vue].$emit(nome, dato): consente di generare un evento denominato [nom] e associato al dato [donnée];
[Vue].$on(nome, fn): consente di intercettare l’evento denominato [nom] e di farlo elaborare dalla funzione [fn]. La funzione [fn] riceverà come parametro il dato [donnée] associato all’evento dal suo emittente;

Questa gestione degli eventi non è legata alla gerarchia dei componenti. È sufficiente che i componenti che desiderano comunicare in questo modo utilizzino la stessa istanza della classe [Vue] per emettere/ascoltare gli eventi. Nel nostro esempio, utilizzeremo l’istanza [eventBus] definita dallo script [event-bus.js] precedente.

10.3. La vista principale [App.vue]

Il codice della 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>
      <!-- i tre componenti che comunicano tramite evento -->
      <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",
    // componenti
    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 nella vista [App]. Inoltre, non vi sarà alcuna relazione gerarchica tra di essi;

10.4. Il componente [Component1]

Il codice del 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",
    // stato del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // metodi di gestione degli eventi
    methods: {
      // gestione dell'evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestione del ciclo di vita del componente
    // evento [created] - il componente è stato creato
    created() {
      // ascolto dell'evento [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Commenti

righe 4-6: un avviso che visualizza il dato [data] della riga 18. Questo dato verrà inizializzato dal gestore di eventi [doSomething] della riga 25. Tale gestore viene attivato alla ricezione dell’evento [someEvent] (riga 34). L’avviso viene visualizzato in base al valore dell’attributo [showMsg] della riga 19. Anche questo attributo viene impostato dal gestore di eventi [doSomething] della riga 25;
riga 32: la funzione [created] è un gestore di eventi. Gestisce l’evento [created], un evento generato durante il ciclo di vita del componente. Ne esistono altri, come [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. L’evento [created] viene generato 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 questo si verifica, viene chiamato il metodo [doSomething] della riga 25;
riga 25: il metodo [doSomething] riceve come parametro [data] il dato che il generatore dell’evento [someEvent] ha associato all’evento;
righe 26-27: lo stato del componente viene modificato in modo che l’avviso delle righe 4-6 visualizzi il dato ricevuto;

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",
    // metodi di gestione degli eventi
    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] della riga 13;
riga 8: viene importata l’istanza [eventBus] definita dallo script [event-bus.js];
riga 14: questa istanza viene utilizzata per generare un evento denominato [someEvent] associato al dato [{ x: 2, y: 4 }]. Infine, quando l’utente fa clic sul pulsante della riga 3, viene generato l’evento [someEvent]. Se si ricorda la definizione di [Component1], quest’ultimo intercetterà tale evento;

10.6. Il componente [Component3]

Il codice di 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",
    // stato del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // gestione dell'evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestione del ciclo di vita del componente
    // evento [created] - il componente è stato creato
    created() {
      // ascolto dell'evento [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.