10. Projeto [vuejs-08]: Eventos independentes da hierarquia de componentes, ciclo de vida dos componentes

O projeto [vuejs-08] demonstra como componentes que não estão diretamente ligados na hierarquia de componentes podem, mesmo assim, comunicar-se através de eventos. A estrutura de diretórios do projeto [vuejs-08] é a seguinte:

10.1. O script principal [main.js]

O script [main.js] permanece o mesmo dos exemplos anteriores.

10.2. O script [even-bus.js]

O script [event-bus.js] é a ferramenta que iremos utilizar para emitir e ouvir eventos:


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

O script [event-bus] simplesmente cria uma instância da classe [Vue] (linhas 1–2) e exporta-a (linha 3). A classe [Vue] tem dois métodos para lidar com eventos:

[Vue].$emit(name, data): permite emitir um evento denominado [name] associado aos dados [data];
[Vue].$on(name, fn): permite-lhe interceptar o evento denominado [name] e processá-lo através da função [fn]. A função [fn] receberá os dados [data] associados ao evento pelo seu emissor como parâmetro;

Este tratamento de eventos não está vinculado à hierarquia de componentes. Os componentes que desejam comunicar-se desta forma precisam simplesmente de utilizar a mesma instância da classe [View] para emitir/ouvir eventos. No nosso exemplo, utilizaremos a instância [eventBus] definida pelo script [event-bus.js] anterior.

10.3. A vista principal [App.vue]

O código para a vista principal [App] é o seguinte:


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

linhas 8–10: a vista principal [App] utiliza três componentes [Component1, Component2, Component3] que comunicarão através de eventos. Os três componentes encontram-se no mesmo nível dentro da vista [App]. Além disso, não haverá qualquer relação hierárquica entre eles;

10.4. O componente [Component1]

O código para o componente [Component1] é o seguinte:


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

Comentários

Linhas 4–6: Um alerta que exibe os dados [data] da linha 18. Estes dados serão inicializados pelo manipulador de eventos [doSomething] na linha 25. Este manipulador é acionado após a receção do evento [someEvent] (linha 34). O alerta é exibido com base no valor do atributo [showMsg] na linha 19. Este atributo também é definido pelo manipulador de eventos [doSomething] na linha 25;
linha 32: a função [created] é um manipulador de eventos. Ela lida com o evento [created], um evento emitido durante o ciclo de vida do componente. Existem outros [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. O evento [created] é emitido quando o componente é criado;
linha 12: a instância [eventBus] da classe [Vue] é importada;
linha 34: é utilizada para escutar o evento [someEvent]. Quando este evento ocorre, o método [doSomething] na linha 25 é chamado;
linha 25: o método [doSomething] recebe os dados que o emissor do evento [someEvent] associou ao evento como o parâmetro [data];
linhas 26–27: o estado do componente é atualizado para que o alerta nas linhas 4–6 exiba os dados recebidos;

10.5. O componente [Component2]

O componente [Component2] é o seguinte:


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

Comentários

linha 3: um botão para criar um evento. Quando o utilizador clica neste botão, o método [createEvent] na linha 13 é chamado;
linha 8: a instância [eventBus] definida pelo script [event-bus.js] é importada;
linha 14: esta instância é utilizada para emitir um evento denominado [someEvent] associado aos dados [{ x: 2, y: 4 }]. Por fim, quando o utilizador clica no botão da linha 3, o evento [someEvent] é emitido. Se recordarmos a definição de [Component1], este irá interceptar este evento;

10.6. O componente [Component3]

O código para este componente é o seguinte:


<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] é um clone de [Component1]. Existe apenas para demonstrar que um evento pode ser interceptado por vários componentes.