كيفية إصدار الأحداث للتواصل بين مكونات Vue

تسهل هيكلة تطبيقات الويب الخاصة بك باستخدام بنية المكون إنشاء التطبيق الخاص بك وصيانته.

يعد إصدار أحداث مخصصة إحدى الطرق التي يمكنك من خلالها التعامل مع الاتصال بين المكونات ؛ الدعائم والفتحات اثنان آخران. تسمح لك الأحداث المخصصة بإرسال البيانات من الطفل إلى المكون الرئيسي.

تنبعث الأحداث من الطفل إلى والده

يقدم Vue الكثير من الخيارات للتواصل بين المكونات. طريقة واحدة مهمة الاتصال بين المكونات من خلال الدعائم. تسمح لك الدعائم بإرسال البيانات من الوالد إلى المكونات التابعة.

ماذا يحدث بعد ذلك إذا كنت تريد إرسال البيانات من الطفل إلى المكون الرئيسي؟ يسمح لك Vue بإرسال أحداث مخصصة من الطفل إلى المكونات الأصلية. تمكن هذه العملية المكون الرئيسي من استخدام البيانات والوظائف من المكون الفرعي.

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

اصطلاح التسمية للأحداث المخصصة المنبعثة في Vue

قبل الغوص في كيفية إصدار أحداث مخصصة ، تحتاج إلى فهم اصطلاح التسمية للأحداث المخصصة في Vue. قبل ظهور Vue 3 ، كان على المطورين تحديد الأحداث المخصصة بدقة باستخدام حالة كباب، لفصل الكلمات في الأسماء بحرف الواصلة.

من الممارسات القياسية الآن تحديد أحداثك المخصصة في حالة الكباب عند العمل باستخدام نماذج HTML ، و جمل عند العمل باستخدام JavaScript. ومع ذلك ، يمكنك اختيار استخدام أي خيار عند العمل باستخدام JavaScript ، حيث يجمع Vue جميع الأحداث المخصصة مرة أخرى إلى kebab-case.

عندما ترسل حدثًا مخصصًا ، انقل الغرض من الحدث باسم وصفي. هذا مهم للغاية ، خاصة عندما تعمل في فريق ، لتوضيح الغرض من الحدث.

كيفية إصدار أحداث مخصصة من الطفل إلى المكون الرئيسي

هناك طريقتان يمكنك من خلالهما إنجاز إصدار أحداث مخصصة في Vue. يمكنك إصدار أحداث مخصصة مضمنة (مباشرة في قالب Vue) بامتداد ينبعث $ الطريقة التي يوفرها Vue. يمكنك أيضًا الاستفادة من عرّفوا الحدود ماكرو متاح من Vue 3.

إصدار أحداث مخصصة في Vue باستخدام طريقة $ emit

ينبعث $، وهي طريقة Vue مضمنة ، تسمح للمكون الفرعي بإرسال حدث إلى المكون الأصلي الخاص به. يمكنك استدعاء هذه الطريقة في السطر (داخل قالب المكون الفرعي) لتشغيل الحدث المخصص. يأخذ التابع $ emit وسيطين: اسم الحدث الذي تريد إرساله والحمولة الاختيارية التي يمكن أن تحمل بيانات إضافية.

ضع في اعتبارك هذا المكون الفرعي الذي يصدر حدثًا لإخطار المكون الرئيسي بنقرة زر:

 ChildComponent.vue 
<النصييثبت>
استيراد {المرجع} من "vue"؛
وظيفة const = المرجع ('')
النصي>
<نموذج>
<شعبة>
<مدخليكتب="نص"نموذج v="بريد">
<زرv-on: انقر فوق="$ emit ('النقر على زر' ، نشر)">بريدزر>
شعبة>
نموذج>

يوضح مقطع التعليمات البرمجية هذا كيفية إرسال حدث مخصص من مكون تابع. يبدأ الطفل بتهيئة متغير لاحق بسلسلة فارغة.

يقوم المكون الفرعي بعد ذلك بربط عنصر الإدخال بمتغير post باستخدام v-model ، a توجيه ربط بيانات Vue. يتيح هذا الربط التغييرات التي تجريها على حقل الإدخال لتحديث متغير المشاركة تلقائيًا.

يحتوي عنصر الزر على توجيه v-on يستمع إلى أحداث النقر على الزر. النقر على الزر يستدعي التابع $ emit مع وسيطتين: اسم الحدث ، "نقر على زر" ، وقيمة متغير post.

يمكن للمكوِّن الأصل الآن الاستماع إلى الحدث المخصص باستخدام التوجيه v-on لـ التعامل مع الأحداث في Vue:

 ParentComponent.vue 
استيراد {المرجع} من "vue" ؛
استيراد ChildComponent من "./components/ChildComponent.vue" ؛
const postList = المرجع ([])
const addPosts = (post) => {
 postList.value.push (آخر)
}
النصي>
<نموذج>
<شعبة>
<ChildComponent @النقر على زر="addPosts"/>
<ماي>
<ليمقابل="نشر في postList">{{ بريد }}لي>
ماي>
شعبة>
نموذج>

يوضح مقطع التعليمات البرمجية هذا مكونًا رئيسيًا يقوم باستيراد واستخدام المكون الفرعي من قبل. المكون الرئيسي يحدد أ قائمة البريد متغير الصفيف كمرجع تفاعلي. يقوم المكون بعد ذلك بتعريف ملف المشاركات الوظيفة التي تعمل ، مع أخذ بريد دعوى. تضيف الوظيفة منشورًا جديدًا إلى مصفوفة postList بامتداد يدفع() طريقة.

ال @ تم النقر فوق الزر مستمع الحدث يلتقط الحدث المخصص ChildComponent ينبعث عند النقر فوق الزر. يتسبب هذا الحدث في تشغيل وظيفة addPosts. أخيرًا ، تقوم كتلة التعليمات البرمجية بإرفاق ملف مقابل توجيه ل عرض القوائم في Vue إلى عنصر ul للتكرار على مصفوفة postList.

انبعاث الأحداث باستخدام ماكرو selectEmits

قدم Vue 3 ملف عرّفوا الحدود الماكرو ، الذي يحدد بوضوح الأحداث التي يمكن أن يصدرها المكون. يوفر هذا الماكرو طريقة آمنة من النوع لإصدار الأحداث التي تؤدي إلى قاعدة تعليمات برمجية أكثر تنظيماً.

في ما يلي مثال على كيفية استخدام ماكرو selectEmits واستدعائه في المكون الفرعي الخاص بك:

 ChildComponent.vue 
<النصييثبت>
استيراد {المرجع} من "vue" ؛
const انبعاث = تعريف القذائف (["النقر فوق الزر"]) ؛
وظيفة const = ref ("") ؛
زر constClick = () => {
 ينبعث ("النقر بزر الماوس" ، post.value) ؛
};
النصي>
<نموذج>
<شعبة>
<مدخليكتب="نص"نموذج v="بريد" />
<زرv-on: انقر فوق="buttonClick">بريدزر>
شعبة>
نموذج>

بينما تظل الوظيفة كما هي ، هناك اختلافات كبيرة في بناء جملة التعليمات البرمجية بين كتلة التعليمات البرمجية أعلاه وتلك التي تحتوي على ينبعث $ وظيفة.

في كتلة التعليمات البرمجية هذه ، ملف عرّفوا الحدود يحدد الماكرو النقر على زر حدث. من خلال استدعاء هذا الماكرو ، تُرجع كتلة التعليمات البرمجية وظيفة $ emit ، مما يسمح لك بإصدار الأحداث المحددة. ستحتوي المصفوفة التي تم تمريرها إلى الماكرو selectEmits داخل المكون على جميع الأحداث التي تريد إرسالها إلى المكون الرئيسي.

بعد ذلك ، تحدد كتلة التعليمات البرمجية ملف زر انقر وظيفة. ترسل هذه الوظيفة الحدث الذي تم النقر فوقه ومتغير الترحيل إلى المكون الرئيسي. تحتوي كتلة القالب للمكون الفرعي على عنصر زر.

يحتوي عنصر الزر على ملف v-on: انقر فوق توجيه يؤدي إلى وظيفة buttonClick. يمكن للمكوِّن الأصل بعد ذلك استخدام المكوِّن الفرعي بنفس الطريقة التي استخدمها مع التابع $ emit.

يستفيد مطورو Vue من البنية القائمة على المكونات

يمكنك التواصل من مكوّن فرعي إلى أصله عن طريق إرسال الأحداث باستخدام التابع $ emit والماكرو selectEmits.

يمكنك الاستفادة من البنية القائمة على المكونات في Vue لأنها تتيح لك كتابة تعليمات برمجية أكثر تنظيماً وإيجازاً. باستخدام أطر عمل JavaScript الحديثة مثل Vue ، يمكنك استخدام Web Components ، وهو معيار ويب W3C ، لتحقيق هذه البنية القائمة على المكونات.