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>
  export default {
    name: "component11",
    // طرق المكون
    methods: {
      // إدارة الحدث [click] على الزر
      createEvent() {
        // يتم إرسال حدث مقترن ببيانات
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

تعليقات

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

9.4. المكون [Component1]

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


<template>
  <b-row>
    <!-- المكون الذي يطلق الحدث -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- الرسالة التي تعرضها طريقة إدارة الحدث-->
    <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",
    // المكونات
    components: {
      Component11
    },
    // حالة المكون
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // طرق إدارة الأحداث
    methods: {
      doSomething(data) {
        // data هو الكائن الذي تم ربطه بالحدث [someEvent]
        this.data = data;
        // يعرض التنبيه
        this.showMsg = true;
      }
    }
  };
</script>

العرض المرئي