10. [vuejs-08] projesi: bileşen hiyerarşisinden bağımsız olaylar, bileşen yaşam döngüsü

[vuejs-08] projesi, bileşen hiyerarşisinde doğrudan birbirine bağlı olmayan bileşenlerin yine de olaylar aracılığıyla nasıl iletişim kurabileceğini gösterir. [vuejs-08] projesinin ağaç yapısı şöyledir:

10.1. Ana komut dosyası [main.js]

[main.js] komut dosyası, önceki örneklerdeki haliyle kalır.

10.2. [even-bus.js] komut dosyası

[event-bus.js] komut dosyası, olayları yayınlamak ve dinlemek için kullanacağımız araçtır:


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

[event-bus] komut dosyası, yalnızca [Vue] sınıfının bir örneğini oluşturur (1-2. satırlar) ve bunu dışa aktarır (3. satır). [Vue] sınıfı, olayları yönetmek için iki yönteme sahiptir:

[Vue].$emit(ad, veri): [nom] adlı ve [donnée] verisiyle ilişkili bir olayı tetiklemeye yarar;
[Vue].$on(ad, fonksiyon): [nom] adlı olayı yakalayıp [fn] fonksiyonu tarafından işlenmesini sağlar. [fn] işlevi, olayın yayıncısı tarafından olayla ilişkilendirilen [donnée] verisini parametre olarak alacaktır;

Bu olay yönetimi, bileşen hiyerarşisiyle bağlantılı değildir. Bu şekilde iletişim kurmak isteyen bileşenlerin, olayları yayınlamak/dinlemek için [Vue] sınıfının aynı örneğini kullanması yeterlidir. Örneğimizde, önceki [event-bus.js] komut dosyası tarafından tanımlanan [eventBus] örneğini kullanacağız.

10.3. [App.vue] ana görünümü

[App] ana görünümünün kodu şöyledir:


<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>
      <!-- olay yoluyla iletişim kuran üç bileşen -->
      <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",
    // bileşenler
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

8-10. satırlar: [App] ana görünümü, olaylar aracılığıyla iletişim kuracak üç [Component1, Component2, Component3] bileşeni kullanır. Bu üç bileşen, [App] görünümünde aynı seviyededir. Ayrıca, aralarında herhangi bir hiyerarşi ilişkisi olmayacaktır;

10.4. [Component1] bileşeni

[Component1] bileşeninin kodu şöyledir:


<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",
    // bileşen durumu
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // olay yönetimi yöntemleri
    methods: {
      // olay yönetimi [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // bileşen yaşam döngüsü yönetimi
    // [created] olayı - bileşen oluşturuldu
    created() {
      // [someEvent] olayını dinleme
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Açıklamalar

4-6. satırlar: 18. satırdaki [data] verisini görüntüleyen bir uyarı. Bu veri, 25. satırdaki [doSomething] olay yöneticisi tarafından başlatılacaktır. Bu işleyici, [someEvent] olayının alınmasıyla etkinleştirilir (satır 34). Uyarı, 19. satırdaki [showMsg] özniteliğinin değerine bağlı olarak görüntülenir. Bu öznitelik de 25. satırdaki [doSomething] olay yöneticisi tarafından ayarlanır;
satır 32: [created] işlevi bir olay yöneticisidir. Bu işlev, bileşenin yaşam döngüsü sırasında tetiklenen [created] olayını yönetir. Bunun dışında [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed] gibi başka olaylar da mevcuttur. [created] olayı, bileşen oluşturulduğunda tetiklenir;
12. satır: [Vue] sınıfının [eventBus] örneği içe aktarılır;
34. satır: [someEvent] olayını dinlemek için kullanılır. Bu olay gerçekleştiğinde, 25. satırdaki [doSomething] yöntemi çağrılır;
25. satır: [doSomething] yöntemi, [data] parametresi olarak, [someEvent] olayının göndereni tarafından olaya eşleştirilen veriyi alır;
26-27. satırlar: 4-6. satırlardaki uyarıda alınan verinin görüntülenmesi için bileşenin durumu değiştirilir;

10.5. [Component2] bileşeni

[Component2] bileşeni şöyledir:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- komut dosyası -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // olay yönetimi yöntemleri
    methods: {
      createEvent() {
        eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Açıklamalar

3. satır: Bir olay oluşturmak için bir düğme. Kullanıcı bu düğmeye tıkladığında, 13. satırdaki [createEvent] yöntemi çağrılır;
8. satır: [event-bus.js] komut dosyası tarafından tanımlanan [eventBus] örneği içe aktarılır;
14. satır: Bu örnek, [{ x: 2, y: 4 }] verisiyle ilişkili [someEvent] adlı bir olayı yayınlamak için kullanılır. Sonuç olarak, kullanıcı 3. satırdaki düğmeye tıkladığında [someEvent] olayı tetiklenir. [Component1]'in tanımını hatırlarsak, bu olay [Component1] tarafından yakalanacaktır;

10.6. [Component3] bileşeni

Bu bileşenin kodu şöyledir:


<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",
    // bileşen durumu
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // olay yönetimi [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // bileşen yaşam döngüsü yönetimi
    // [created] olayı - bileşen oluşturuldu
    created() {
      // [someEvent] olayını dinleme
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3], [Component1]'in bir kopyasıdır. Bu bileşen, bir olayın birden fazla bileşen tarafından yakalanabileceğini göstermek amacıyla eklenmiştir.