الأحداث المخصصة باستخدام createEventDispatcher
أطلق أحداثًا مخصصة معرّفة بالأنواع من المكوّنات الابنة ليتعامل معها المكوّن الأصل
الأحداث المخصصة باستخدام createEventDispatcher درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
لماذا نستخدم الأحداث المخصّصة
تتواصل المكوّنات الابنة مع المكوّن الأب بإرسال أحداث مخصّصة يستمع إليها الأب.
استيراد المُرسِل
استوردوا createEventDispatcher من svelte وأنشئوا مُرسِلًا واحدًا داخل البرنامج النصي.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>إرسال حدث
استدعوا dispatch(name, detail) لإصدار حدث. ويستمع الأبوان باستخدام on:name.
function save() { dispatch("save", { id: 42 }); }الاستماع في المكوّن الأب
تعاملوا مع الأحداث المخصّصة كما تتعاملون مع أحداث DOM.
<Child on:save={(e) => console.log(e.detail.id)} />تفاصيل الحدث
تصبح الوسيطة الثانية هي event.detail في جهة المستهلك.
لا يحدث انتشار افتراضيًا
لا تنتشر الأحداث المخصّصة تلقائيًا عبر شجرة مكوّنات Svelte. مرّروها صراحةً عند الحاجة.
أحداث معرّفة بالأنواع
باستخدام TypeScript، يمكنكم تعريف أنواع الأحداث للحصول على الإكمال التلقائي في المكوّنات الأبوية.
const dispatch = createEventDispatcher<{ save: { id: number } }>();أحداث قابلة للإلغاء
مرّروا { cancelable: true } كوسيطة ثالثة للسماح للمكوّنات الأبوية باستدعاء preventDefault.
أحداث متعددة
يمكن لمُرسِل واحد إصدار أنواع عديدة من الأحداث؛ استخدموا أسماء فريدة لكل غرض.
تجنّبوا الأسماء العامة
فضّلوا أسماء محددة مثل itemSelected بدلًا من الاسم العام change.
الحدث في مقابل دالة الاستدعاء
تُعدّ الأحداث مناسبة للإشعارات المتجهة إلى الأعلى؛ أما عند الحاجة إلى تكامل وثيق، ففكّروا في تمرير خصائص لدوال الاستدعاء.
تحقق سريع
كيف يقرأ المكوّن الأب بيانات الحدث؟
مراجعة
استخدموا createEventDispatcher لإصدار أحداث مُسمّاة مع حمولة تفاصيل، واستمعوا إليها باستخدام on:eventName.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «الأحداث المخصصة باستخدام createEventDispatcher» مجاني؟
نعم — نص درس «الأحداث المخصصة باستخدام createEventDispatcher» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «الأحداث المخصصة باستخدام createEventDispatcher»؟
أطلق أحداثًا مخصصة معرّفة بالأنواع من المكوّنات الابنة ليتعامل معها المكوّن الأصل تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الأحداث المخصصة باستخدام createEventDispatcher»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- on:click وon:input وon:submit
- معدّلات الأحداث: preventDefault وstopPropagation وonce
- الأحداث المخصصة باستخدام createEventDispatcher
- تمرير الأحداث باستخدام on:click