9. [vuejs-07] projesi: bileşen hiyerarşisinde olayların yukarıya aktarılması

Projenin ağaç yapısı şu şekildedir:

9.1. Ana komut dosyası [main.js]

Ana komut dosyası [main.js] değişmeden kalır.

9.2. Ana bileşen [App]

[App] bileşeninin kodu şöyledir:

<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] bileşeni, yeni bir [Component1] bileşenini kullanır (7., 13. ve 17. satırlar).

9.3. [Component11] bileşeni

[Component11] bileşeninin kodu şöyledir:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- komut dosyası -->
<script>
  export default {
    name: "component11",
    // bileşen yöntemleri
    methods: {
      // [click] düğmesindeki olay yönetimi
      createEvent() {
        // bir veriye bağlı bir olay gönderilir
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Açıklamalar

• 1-3. satırlar: [Component11] bileşeni, tıklanabilen tek bir düğme içerir. Bu düğmeye tıklandığında, 11-14. satırlardaki [createEvent] yöntemi yürütülür;
• 13. satır: Her [Vue] örneği, bir olay yayınlamaya olanak tanıyan [$emit] yöntemine sahiptir:
  • 1. parametre, gönderilen olayın adıdır;
  • ikinci parametre, bu olaya ilişkilendirilmek istenen veridir;
  • yayınlanan olay, [Component11] bileşenini kapsayan bileşen hiyerarşisi boyunca yukarı doğru ilerler. Olayı işleyebilecek bir bileşen bulunana kadar hiyerarşi boyunca yukarı doğru ilerler. Bu ilerleme, [Component11] bileşeninin üst bileşeninden başlar;

9.4. [Component1] bileşeni

[Component1] bileşeninin kodu şöyledir:

<template>
  <b-row>
    <!-- olayı başlatan bileşen -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- olay yönetimi yöntemi tarafından görüntülenen mesaj-->
    <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",
    // bileşenler
    components: {
      Component11
    },
    // bileşenin durumu
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // olay işleme yöntemleri
    methods: {
      doSomething(data) {
        // data, olayla ilişkilendirilen nesnedir [someEvent]
        this.data = data;
        // uyarıyı görüntüler
        this.showMsg = true;
      }
    }
  };
</script>

Görsel çıktı

Yorumlar

• 5. satır: [Component1], [Component11]’in üst öğesidir ve bu nedenle bu bileşen tarafından yayınlanan olayları “dinleyebilir” (kullanılan terim budur). Bu bileşenin [someEvent] olayını yayınlayabileceği bilinmektedir. [@someEvent="doSomething"] özniteliği, [Component11] tarafından yayınlanan [someEvent] olayı gerçekleşirse, 33. satırdaki [doSomething] yönteminin yürütülmesi gerektiğini belirtir;
• 9-11. satırlar: [doSomething] yöntemi tarafından görüntülenen bir mesaj. Bu mesajın görüntülenmesi, 28. satırdaki [showMsg] boole değeri tarafından kontrol edilir. Uyarı, 27. satırdaki [data] özniteliğini görüntüler;
• 33. satır: 5. satırdaki [someEvent] olayı gerçekleştiğinde yürütülen [doSomething] yöntemi, bu olayla ilişkili [data] verisini parametre olarak alır. Bu parametre, 27. satırdaki ve 11. satırda görüntülenen [data] özniteliğine atanır;
• 37. satır: 9-11. satırlardaki uyarıyı görüntülemek için [showMsg] özniteliğinin değerini [true] olarak ayarlıyoruz;

9.5. Projenin çalıştırılması