Vue.js: تواصل البيانات بين المكونات

 
// هنا نقوم بتعيين قيمة ثابتة للـ title.

// هنا نرسل قيمة الـ Title التي عرّفناها في عنصر الأب إلى القيمة التي عرّفناها في عنصر الابن.

يمكننا استخدامها على النحو التالي أثناء الاستقبال.

عنصر الابن

للتواصل بين الابن والأب باستخدام $emit

لقد قمنا بنقل البيانات من الأب إلى الابن عبر props، والآن نحتاج إلى إجراء عملية معاكسة وإرسال البيانات للأعلى. لهذا نستخدم هيكل emit. إذا أردنا إعطاء مثال مختصر، يمكننا استخدام this.$emit("result", item).

إذا تابعنا من المثال السابق، سنحصل على نتيجة مثل هذه؛

عنصر الابن

لالتقاط هذه الـ emits داخل الأب، نستخدم @emitAdı أو v-on:emitAdı.

عنصر الأب

للتواصل بين ابن وابن آخر باستخدام event-bus

هنا، نظرًا لعدم وجود علاقة مباشرة بين الأب والابن كما هو الحال بيناتهم، نحتاج إلى استخدام وسيط، وهنا نستخدم كائن eventbus. نقوم بإنشاء هذا الكائن ككائن Vue لا يرتبط بأي عنصر DOM، وسنستخدم هذا الكائن فقط عند نقل البيانات. يمكن لجميع العناصر إرسال أحداث هنا وجميع العناصر التي تستمع هنا ستتمكن من اتخاذ الإجراءات بناءً على البيانات الواردة.

أولاً، سنقوم بإضافة كائن eventBus كما حددنا في event-bus.js.

بعد ذلك، سيكون كافيًا استيراده في الصفحات التي سنستخدمه فيها. نظرًا لأننا سنستخدمها فقط بين عنصرين، لم نعرفها عالميًا.

في مثالنا الحالي، دعونا نحدث عنوان العنصر A من خلال الضغط على الزر الموجود في العنصر B.

عنصر الابن A

عنصر الابن B

باستخدام الطرق الثلاثة أعلاه، يمكننا إجراء نقل البيانات بين العناصر.