10. проект [vuejs-08]: події, незалежні від ієрархії компонентів, життєвий цикл компонентів

Проєкт [vuejs-08] демонструє, як компоненти, що не пов’язані безпосередньо в ієрархії компонентів, можуть, тим не менш, взаємодіяти за допомогою подій. Структура проєкту [vuejs-08] є такою:

10.1. Головний скрипт [main.js]

Скрипт [main.js] залишається таким самим, як і в попередніх прикладах.

10.2. Скрипт [even-bus.js]

Скрипт [event-bus.js] — це інструмент, який ми будемо використовувати для генерації та обробки подій:


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

Скрипт [event-bus] просто створює екземпляр класу [Vue] (рядки 1–2) та експортує його (рядок 3). Клас [Vue] має два методи для обробки подій:

[Vue].$emit(ім’я, дані): дозволяє генерувати подію з іменем [nom], пов’язану з даними [donnée];
[Vue].$on(ім'я, fn): дозволяє перехопити подію з іменем [nom] і передати її на обробку функції [fn]. Функція [fn] отримає як параметр дані [donnée], пов’язані з подією її джерелом;

Таке управління подіями не пов’язане з ієрархією компонентів. Необхідно лише, щоб компоненти, які хочуть таким чином взаємодіяти, використовували один і той самий екземпляр класу [Vue] для генерації та обробки подій. У нашому прикладі ми будемо використовувати екземпляр [eventBus], визначений попереднім скриптом [event-bus.js].

10.3. Головний вигляд [App.vue]

Код головного виду [App] має такий вигляд:


<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>
      <!-- три компоненти, які взаємодіють через подію -->
      <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",
    // компоненти
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

рядки 8–10: головний вигляд [App] використовує три компоненти [Component1, Component2, Component3], які будуть взаємодіяти за допомогою подій. Ці три компоненти знаходяться на одному рівні у вигляд [App]. Крім того, між ними не буде ієрархічних відносин;

10.4. Компонент [Component1]

Код компонента [Component1] такий:


<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",
    // стан компонента
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // методи управління подіями
    methods: {
      // обробка події [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // управління життєвим циклом компонента
    // подія [created] — компонент створено
    created() {
      // обслуговування події [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Коментарі

рядки 4–6: сповіщення, яке відображає дані [data] із рядка 18. Ці дані будуть ініціалізовані обробником події [doSomething] із рядка 25. Цей обробник активується при отриманні події [someEvent] (рядок 34). Сповіщення відображається залежно від значення атрибута [showMsg] у рядку 19. Цей атрибут також встановлюється обробником події [doSomething] у рядку 25;
рядок 32: функція [created] є обробником події. Вона обробляє подію [created], яка генерується протягом життєвого циклу компонента. Існують також інші події, наприклад [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. Подія [created] генерується під час створення компонента;
рядок 12: імпортується екземпляр [eventBus] класу [Vue];
рядок 34: вона використовується для обробки події [someEvent]. Коли ця подія відбувається, викликається метод [doSomething] із рядка 25;
рядок 25: метод [doSomething] отримує як параметр [data] дані, які генератор події [someEvent] пов’язав із цією подією;
рядки 26–27: стан компонента змінюється таким чином, щоб у сповіщенні в рядках 4–6 відображалися отримані дані;

10.5. Компонент [Component2]

Компонент [Component2] має такий вигляд:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- скрипт -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // методи обробки подій
    methods: {
      createEvent() {
        eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Коментарі

рядок 3: кнопка для створення події. Коли користувач натискає цю кнопку, викликається метод [createEvent] із рядка 13;
рядок 8: імпортується екземпляр [eventBus], визначений скриптом [event-bus.js];
рядок 14: цей екземпляр використовується для генерації події з назвою [someEvent], пов’язаної з даними [{ x: 2, y: 4 }]. У підсумку, коли користувач натискає кнопку в рядку 3, генерується подія [someEvent]. Якщо згадати визначення [Component1], то воно перехопить цю подію;

10.6. Компонент [Component3]

Код цього компонента такий:


<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",
    // стан компонента
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // управління подією [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // управління життєвим циклом компонента
    // подія [created] — компонент створено
    created() {
      // обслуговування події [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] є клоном [Component1]. Він існує лише для того, щоб продемонструвати, що подія може перехоплюватися кількома компонентами.