11. المشروع [vuejs-09]: استخدام مكون إضافي [eventBus]

مشروع [vuejs-09] مطابق لمشروع [vuejs-08] باستثناء أنه يقدم مفهوم المكون الإضافي. هيكل دليل المشروع كما يلي:

11.1. المكوّن الإضافي [./plugins/event-bus]

يظل البرنامج النصي [./event-bus.js] كما هو في المثال السابق:

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

المكوّن الإضافي [./plugins/event-bus.js] هو كما يلي:

export default {
  install(Vue, eventBus) {
    // ajoute une propriété [$eventBus] à la classe Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // lorsque Vue.$eventBus est référencé, on rend le 2ième paramètre [eventBus]
      get: () => eventBus,
    })
  }
}

تعليقات

• المكوّن الإضافي [Vue] هو كائن يحتوي على دالة [install] (السطر 2). يتم استدعاء هذه الدالة تلقائيًا عندما يعلن كود ما عن استخدام المكوّن الإضافي؛
• الأسطر 1–9: الكائن الذي يتم تصديره بواسطة البرنامج النصي؛
• السطر 2: تأخذ وظيفة [install] معلمتين هنا:
  • [Vue]: الدالة التي تم الحصول عليها بواسطة عبارة [import Vue from ‘Vue’]. يمكن اعتبارها فئة؛
  • [eventBus]: الكائن الذي يتم تصديره بواسطة البرنامج النصي [./event-bus]؛
• الأسطر 4–7: تعديل تعريف (المعروف باسم النموذج الأولي) دالة [Vue] بإضافة الخاصية [$eventBus] إليها. إذا فكرنا من منظور [class]، فإن الخاصية [$eventBus] تضاف إلى فئة [Vue]. وبالتالي، ستتمكن المكونات التي تمثل مثيلات لـ [Vue] من الوصول إلى هذه الخاصية الجديدة؛
• يشير السطر 6 إلى أنه عند الإشارة إلى الخاصية [Vue].$eventBus، سنحصل على المعلمة [eventBus] من السطر 2. سنرى لاحقًا أن هذه المعلمة الثانية ستكون الكائن [eventBus] الذي تم تصديره بواسطة البرنامج النصي [./event-bus.js]. لذلك، في النهاية، عندما يستخدم المكون C التعبير [C.$eventBus]، فإنه سيشير إلى كائن [eventBus] الذي تم تصديره بواسطة البرنامج النصي [./event-bus.js]. وهذا سيوفر عليه الحاجة إلى استيراد البرنامج النصي [./event-bus.js]. وهذا هو الهدف من المكون الإضافي: تبسيط الوصول إلى الكائن [eventBus] الذي تم تصديره بواسطة البرنامج النصي [./event-bus.js]؛
• لاحظ أن المكون الإضافي لا يجب أن يُسمى [event-bus.js] بالضرورة. كان من الممكن تسميته [plugin-event-bus]، على سبيل المثال؛
• لاحظ أيضًا أن الرمز $ في [$eventBus] هو اصطلاح يُستخدم للإشارة إلى خصائص [Vue] التي تمت إضافتها عبر المكونات الإضافية. لست ملزمًا باتباع هذا الاصطلاح. في هذا النص، سنتبعه؛

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

يحدد البرنامج النصي [./plugins/event-bus.js] مكونًا إضافيًا لإطار عمل [Vue.js]. لم يتم استخدام هذا المكون الإضافي بعد، بل تم تحديده فقط. البرنامج النصي [main.js] هو الذي يقوم بتنشيطه:

// imports
import Vue from 'vue'
import App from './App.vue'
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// eventbus
import eventBus from './event-bus';
import PluginEventBus from './plugins/event-bus';
Vue.use(PluginEventBus, eventBus);
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

تعليقات

• تعمل الأسطر 14–16 على تنشيط المكون الإضافي [PluginEventBus]. بعد السطر 16، تمتلك جميع مثيلات فئة (دالة) [Vue] الخاصية [$eventBus]، التي تشير إلى نفس الكائن الذي تم تصديره بواسطة البرنامج النصي [./event-bus.js]. سيكون هذا هو الحال بالنسبة لكل مكون في المشروع؛

11.3. العرض الرئيسي [App]

تظل طريقة العرض الرئيسية [App] كما كانت في المشروع السابق.

11.4. المكون [Component1]

يستخدم المكون [Component1] الآن خاصية [$eventBus] الخاصة به للاستماع إلى الحدث [someEvent]:

<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>
  export default {
    name: "component1",
    // component status
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // event management methods
    methods: {
      // evt management [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // component lifecycle management
    // évt [created] - the component has been created
    created() {
      // listen to event [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

تعليقات

• السطر 33، استخدام خاصية [this.$eventBus] للمكون. لاحظ أيضًا أن البرنامج النصي في السطر 11 لم يعد يستورد البرنامج النصي [./event-bus.js]؛

11.5. المكون [Component2]

يستخدم المكون [Component2] الآن خاصية [$eventBus] الخاصة به لإصدار الحدث [someEvent]:

<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- script -->
<script>
  export default {
    name: "component2",
    // méthodes de gestion des évts
    methods: {
      createEvent() {
        this.$eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

تعليقات

• السطر 13: استخدام خاصية [this.$eventBus] للمكون. لاحظ أيضًا أن البرنامج النصي في السطر 7 لم يعد يستورد البرنامج النصي [./event-bus.js]؛

11.6. المكون [Component3]

يحتوي المكون [Component3] على نفس كود [Component1]. كما أنه يستمع إلى الحدث [someEvent].

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

نحصل على نفس النتائج كما في المشروع السابق.