عند تطوير تطبيق باستخدام Vue.js، نقوم بفصل جميع الأجزاء إلى مكونات فردية، وبناء هيكل فوق ذلك. هذا لا يوفر لنا فقط هيكلًا أكثر تنظيمًا، بل يمنعنا أيضًا من كتابة نفس الكود عدة مرات أو إجراء نفس التعديلات في عشرات الأماكن عندما يكون هناك حاجة إلى تغيير.
بالطبع، هذا ليس خاصًا بـ Vue.js أو شيء مقترح هنا، وهناك مبدأ عام في البرمجيات يعرف باسم DRY (Don't Repeat Yourself) يتعلق بهذا الموضوع. هذا المبدأ هو أحد المبادئ الأساسية في البرمجيات ويدعو إلى تجنب تكرار الكود. (تم تسميته DRY وشرح بالتفصيل في كتاب "The Pragmatic Programmer").
من خلال الالتزام بهذا المبدأ والمنطق، نقوم بإنشاء مكونات في مشاريعنا، والتي تحتوي على بيانات ديناميكية، ونحتاج إلى تمرير هذه البيانات من المكونات الأم إلى المكونات الفرعية (من الأم إلى الفرعية)، من المكونات الفرعية إلى المكونات الأم (من الفرعية إلى الأم)، وبين المكونات ذات المستوى الأدنى (من الفرعية إلى الفرعية). دعونا نلقي نظرة على كيفية تنفيذ عمليات نقل البيانات هذه.
للاتصال بين الأم والفرعية: props
نستخدم بنية props عند نقل البيانات من المكون الأم إلى المكون الفرعي. يمكننا استخدام البيانات التي نرسلها عبر props في المكون الفرعي تمامًا مثل قيمة نعرفها داخل البيانات.المكون الأم
// هنا، نقوم بتعيين قيمة ثابتة للعنوان.
// هنا، نرسل قيمة Title المعرفة في العنصر الخاص بالمكون الأم إلى قيمة العنوان المعرفة في المكون الفرعي.
يمكننا استخدامه كما يلي عند استلامه.
المكون الفرعي
للاتصال بين الفرعية والأم: $emit
لقد قمنا بنقل البيانات إلى الفرعية عبر props من الأم؛ هنا نحتاج إلى القيام بالعكس ودفع البيانات إلى الأعلى. لهذا، نستخدم بنية emit. إذا كنا بحاجة إلى تقديم مثال قصير، يمكننا استخدامه هكذا: this.$emit("result", item)
بالاستمرار من المثال أعلاه، سنحصل على النتيجة التالية؛
المكون الفرعي
لالتقاط هذه الإشارات في الأم، نستخدمها كـ @emitName أو v-on:emitName.
المكون الأم
للاتصال بين الفرعية والفرعية: event-bus
هنا، نظرًا لعدم وجود علاقة مباشرة مثل الأم والفرعية، نحتاج إلى استخدام وسيط، ونستخدم هنا instance eventbus. نقوم بإنشاء هذا الـ instance كـ Vue instance لا يرتبط بأي عنصر DOM، وسنستخدم هذا الـ instance فقط لنقل البيانات. يمكن لجميع المكونات إرسال الأحداث هنا، ويمكن لجميع المكونات التي تستمع هنا اتخاذ إجراء وفقًا للبيانات الواردة.
هنا، سنضيف أولاً instance eventBus إلى event-bus.js كما هو مذكور.
في مثالنا الحالي، دعونا نقوم بتحديث العنوان في المكون A بالنقر على الزر في المكون B.
المكون الفرعي A
المكون الفرعي B
مع الطرق الثلاثة المذكورة أعلاه، يمكننا تنفيذ عمليات نقل البيانات بين المكونات.
