9. Проєкт [vuejs-07]: передача подій у ієрархії компонентів

Дерево проекту має такий вигляд:

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

Головний скрипт [main.js] залишається без змін.

9.2. Головний компонент [App]

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


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

Компонент [App] використовує новий компонент [Component1] (рядки 7, 13, 17).

9.3. Компонент [Component11]

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


<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- скрипт -->
<script>
  export default {
    name: "component11",
    // методи компонента
    methods: {
      // обробка події [click] на кнопці
      createEvent() {
        // генерується подія, пов'язана з даними
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Коментарі

рядки 1–3: компонент [Component11] містить лише одну кнопку, на яку можна натиснути. При натисканні на неї виконується метод [createEvent] із рядків 11–14;
рядок 13: кожен екземпляр [Vue] має метод [$emit], який дозволяє генерувати подію:
- перший параметр — це назва події, що генерується;
- другий параметр — це дані, які потрібно пов’язати з цією подією;
- генерована подія просувається вгору по ієрархії компонентів, що є батьківськими для компонента [Component11]. Вона просувається вгору по ієрархії, доки не знайде компонент, готовий її обробити. Це просування починається з батьківського компонента [Component11];

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

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


<template>
  <b-row>
    <!-- компонент, що запускає подію -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- повідомлення, що відображається методом обробки події-->
    <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",
    // компоненти
    components: {
      Component11
    },
    // стан компонента
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // методи обробки подій
    methods: {
      doSomething(data) {
        // data — це об’єкт, який було пов’язано з подією [someEvent]
        this.data = data;
        // відображає сповіщення
        this.showMsg = true;
      }
    }
  };
</script>

Візуальне відображення