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

لا ترتبط إدارة الأحداث هذه بالتسلسل الهرمي للمكونات. يجب فقط أن تستخدم المكونات التي ترغب في التواصل بهذه الطريقة نفس مثيل الفئة [Vue] لإرسال/استقبال الأحداث. في مثالنا، سنستخدم المثيل [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>
      <!-- المكونات الثلاثة التي تتواصل عبر الحدث -->
      <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",
    // المكونات
    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",
    // حالة المكون
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // طرق إدارة الأحداث
    methods: {
      // إدارة الحدث [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // إدارة دورة حياة المكون
    // حدث [created] - تم إنشاء المكون
    created() {
      // استماع إلى الحدث [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] كمعلمة [data]، وهي البيانات التي ربطها مرسل الحدث [someEvent] بالحدث؛
السطران 26-27: يتم تعديل حالة المكون بحيث يعرض تنبيه السطور 4-6 البيانات المستلمة؛

10.5. المكون [Component2]

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


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- نص برمجي -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // طرق إدارة الأحداث
    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",
    // حالة المكون
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // إدارة الحدث [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // إدارة دورة حياة المكون
    // الحدث [created] - تم إنشاء المكون
    created() {
      // الاستماع إلى الحدث [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

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