9. المشروع [vuejs-07]: انتشار الأحداث في التسلسل الهرمي للمكونات

هيكل دليل المشروع كما يلي:

9.1. البرنامج النصي الرئيسي [main.js]

يظل البرنامج النصي الرئيسي [main.js] دون تغيير.

9.2. المكون الرئيسي [App]

فيما يلي كود مكون [App]:

<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] مكونًا جديدًا [Component1] (الأسطر 7 و13 و17).

9.3. مكون [Component11]

فيما يلي كود مكون [Component11]:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- script -->
<script>
  export default {
    name: "component11",
    // component methods
    methods: {
      // event management [click] on button
      createEvent() {
        // we send an event coupled to data
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

تعليقات

• الأسطر 1–3: يحتوي المكون [Component11] على زر واحد فقط يمكن النقر عليه. عند النقر عليه، يتم تنفيذ الأسلوب [createEvent] في الأسطر 11–14؛
• السطر 13: تحتوي كل مثيل [View] على طريقة [$emit] تسمح بإصدار حدث:
  • المعلمة الأولى هي اسم الحدث الذي تم إصداره؛
  • المعلمة الثانية هي البيانات المرتبطة بهذا الحدث؛
  • ينتقل الحدث الذي تم إصداره صعودًا عبر التسلسل الهرمي للمكونات التي تحتوي على المكون [Component11]. وينتقل صعودًا عبر التسلسل الهرمي حتى يجد مكونًا قادرًا على معالجته. تبدأ هذه العملية بالمكون الأصلي لـ [Component11]؛

9.4. المكون [Component1]

فيما يلي كود مكون [Component1]:

<template>
  <b-row>
    <!-- le composant qui lance l'événement -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- message affiché par la méthode de gestion de l'évt-->
    <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",
    // composants
    components: {
      Component11
    },
    // état du composant
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // méthodes de gestion des évts
    methods: {
      doSomething(data) {
        // data est l'objet qui a été associé à l'évt [someEvent]
        this.data = data;
        // affiche l'alerte
        this.showMsg = true;
      }
    }
  };
</script>

العرض المرئي

التعليقات

• السطر 5: [Component1] هو العنصر الأصلي لـ [Component11] وبالتالي يمكنه "الاستماع" (هذا هو المصطلح) للأحداث التي يصدرها هذا المكون. نعلم أن [Component11] يمكنه إصدار الحدث [someEvent]. تشير السمة [@someEvent="doSomething"] إلى أنه في حالة حدوث الحدث [someEvent] الذي يصدره [Component11]، يجب تنفيذ الأسلوب [doSomething] في السطر 33؛
• الأسطر 9-11: رسالة معروضة بواسطة طريقة [doSomething]. يتم التحكم في عرضها بواسطة القيمة المنطقية [showMsg] في السطر 28. يعرض التنبيه السمة [data] من السطر 27؛
• السطر 33: تتلقى طريقة [doSomething]، التي يتم تنفيذها عند حدوث الحدث [someEvent] (السطر 5)، [data] المرتبطة بهذا الحدث كمعلمة. يتم تعيين هذه المعلمة إلى السمة [data] في السطر 27، والتي يتم عرضها في السطر 11؛
• السطر 37: نضبط السمة [showMsg] على [true] لعرض التنبيه من الأسطر 9-11؛

9.5. تشغيل المشروع