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(name, data): تسمح لك بإصدار حدث باسم [name] مرتبط بالبيانات [data]؛
[Vue].$on(name, fn): تسمح لك باعتراض الحدث المسمى [name] ومعالجته بواسطة الدالة [fn]. ستتلقى الدالة [fn] البيانات [data] المرتبطة بالحدث من قبل مُصدره كمعلمة؛

معالجة الأحداث هذه غير مرتبطة بتسلسل المكونات. المكونات التي ترغب في التواصل بهذه الطريقة تحتاج ببساطة إلى استخدام نفس مثيل فئة [View] لإصدار/الاستماع للأحداث. في مثالنا، سنستخدم مثيل [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>
      <!-- les trois composants qui communiquent par évt -->
      <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",
    // composants
    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",
    // état du composant
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // méthodes de gestion des évts
    methods: {
      // gestion de l'evt [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestion du cycle de vie du composant
    // évt [created] - le composant a été créé
    created() {
      // écoute de l'évt [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] البيانات التي يربطها مرسل الحدث [someEvent] بالحدث كمعلمة [data]؛
السطران 26-27: يتم تحديث حالة المكون بحيث يعرض التنبيه في الأسطر 4-6 البيانات المستلمة؛

10.5. المكون [Component2]

المكون [Component2] هو كما يلي:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- script -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // méthodes de gestion des évts
    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",
    // état du composant
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // gestion de l'evt [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestion du cycle de vie du composant
    // évt [created] - le composant a été créé
    created() {
      // écoute de l'évt [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] هو نسخة مطابقة لـ [Component1]. وهو موجود فقط لإثبات أنه يمكن اعتراض حدث ما بواسطة مكونات متعددة.