تمرير الخصائص باستخدام $$props و$$restProps
مرّر جميع الخصائص أو الخصائص المتبقية إلى عنصر أو مكوّن داخلي
تمرير الخصائص باستخدام $$props و$$restProps درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
لماذا تمرير props
غالبًا ما تحتاج مكوّنات التغليف إلى تمرير جميع props المستلمة إلى عنصر داخلي. ويجنب التمرير إدراج كل سمة على حدة.
كائن $$props
داخل المكوّن، يكون $$props كائنًا يحتوي على كل prop مُمرَّر إلى المكوّن.
<script>
// $$props is auto-injected
</script>
<input {...$$props} />تضمين props غير المعروفة
حتى props التي لم يُعلن عنها المكوّن باستخدام export let تكون موجودة في $$props.
كائن $$restProps
يستبعد $$restProps props التي أعلنتم عنها صراحةً باستخدام export let. وهو مفيد لتمرير الإضافات فقط.
<script>
export let label;
</script>
<input {...$$restProps} />النمط الشائع
أعلنوا عن props التي تهمكم، ومرروا البقية إلى العنصر المغلَّف.
<script>
export let label;
export let helpText;
</script>
<label>{label}</label>
<input {...$$restProps} />مشكلة شائعة: الترتيب مهم
استخدموا spread أولًا، ثم تجاوزوا السمات المحددة عند الحاجة.
<input {...$$restProps} type="email" />تمرير class
مرروا السمة class عبر $$restProps لإتاحة مرونة أكبر في تطبيق السمات.
تمرير style
تمرر سمة style وأي سمات data-* بالطريقة الطبيعية نفسها.
معالجات الأحداث
توجد مستمعات الأحداث التي يمررها المكوّن الأب في $$props على هيئة دوال. كما يمررها spread أيضًا.
قيود التفاعلية
يكون $$props و$$restProps أقل كفاءة قليلًا من props المُعلنة، لأن Svelte لا يستطيع تتبعها استاتيكيًا.
ملاحظة حول TypeScript
يكون كلا الكائنين غير محددَي الأنواع بدقة افتراضيًا. أجروا تحويلًا للنوع أو أضيفوا الأنواع إليهما في TS للحصول على تمرير آمن من ناحية الأنواع.
تحقق سريع
ما هو $$restProps؟
مراجعة
مرروا props باستخدام $$props (جميعها) أو $$restProps (الإضافات فقط)، وذلك باستخدام spread على العنصر الداخلي.
الأسئلة الشائعة
هل درس «تمرير الخصائص باستخدام $$props و$$restProps» مجاني؟
نعم — نص درس «تمرير الخصائص باستخدام $$props و$$restProps» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «تمرير الخصائص باستخدام $$props و$$restProps»؟
مرّر جميع الخصائص أو الخصائص المتبقية إلى عنصر أو مكوّن داخلي تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «تمرير الخصائص باستخدام $$props و$$restProps»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- التصريح بالخصائص باستخدام export let
- تمرير الخصائص من المكوّن الأصل
- القيم الافتراضية للخصائص
- تمرير الخصائص باستخدام $$props و$$restProps