9. Projekt [vuejs-07]: przekazywanie zdarzeń w hierarchii komponentów

Struktura drzewa projektu wygląda następująco:

9.1. Główny skrypt [main.js]

Główny skrypt [main.js] pozostaje bez zmian.

9.2. Główny komponent [App]

Kod komponentu [App] jest następujący:

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

Komponent [App] wykorzystuje nowy komponent [Component1] (wiersze 7, 13, 17).

9.3. Komponent [Component11]

Kod komponentu [Component11] jest następujący:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- skrypt -->
<script>
  export default {
    name: "component11",
    // metody komponentu
    methods: {
      // obsługa zdarzenia [click] na przycisku
      createEvent() {
        // wysyłane jest zdarzenie powiązane z danymi
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Uwagi

• wiersze 1–3: komponent [Component11] zawiera tylko jeden przycisk, który można kliknąć. Po kliknięciu uruchamiana jest metoda [createEvent] z wierszy 11–14;
• wiersz 13: każda instancja [Vue] posiada metodę [$emit], która umożliwia wygenerowanie zdarzenia:
  • pierwszym parametrem jest nazwa generowanego zdarzenia;
  • drugim parametrem są dane, które chcemy powiązać z tym zdarzeniem;
  • wysłane zdarzenie przechodzi w górę hierarchii komponentów nadrzędnych względem komponentu [Component11]. Przechodzi w górę hierarchii, aż znajdzie komponent gotowy do jego przetworzenia. Proces ten rozpoczyna się od komponentu nadrzędnego względem [Component11];

9.4. Komponent [Component1]

Kod komponentu [Component1] jest następujący:

<template>
  <b-row>
    <!-- komponent, który wyzwala zdarzenie -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- komunikat wyświetlany przez metodę obsługi zdarzenia-->
    <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",
    // komponenty
    components: {
      Component11
    },
    // stan komponentu
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // metody obsługi zdarzeń
    methods: {
      doSomething(data) {
        // data to obiekt powiązany z zdarzeniem [someEvent]
        this.data = data;
        // wyświetla alert
        this.showMsg = true;
      }
    }
  };
</script>

Wygląd

Komentarze

• wiersz 5: [Component1] jest elementem nadrzędnym względem [Component11] i w związku z tym może „nasłuchiwać” (tak brzmi termin) zdarzeń generowanych przez ten komponent. Wiadomo, że komponent ten może generować zdarzenie [someEvent]. Atrybut [@someEvent="doSomething"] wskazuje, że jeśli wystąpi zdarzenie [someEvent] wysłane przez [Component11], wówczas należy wykonać metodę [doSomething] z wiersza 33;
• wiersze 9–11: komunikat wyświetlany przez metodę [doSomething]. Jego wyświetlenie jest kontrolowane przez zmienną logiczną [showMsg] z wiersza 28. Komunikat wyświetla atrybut [data] z wiersza 27;
• wiersz 33: metoda [doSomething], wykonywana po wystąpieniu zdarzenia [someEvent] (wiersz 5), otrzymuje jako parametr wartość [data] powiązaną z tym zdarzeniem. Parametr ten jest przypisywany do atrybutu [data] w wierszu 27, który jest wyświetlany przez wiersz 11;
• wiersz 37: przypisujemy atrybut [showMsg] do wartości [true], aby wyświetlić alert dotyczący wierszy 9–11;

9.5. Wykonanie projektu