تمرير الخصائص من المكوّن الأصل
مرّر القيم إلى خصائص المكوّنات الابنة في قالب المكوّن الأصل
تمرير الخصائص من المكوّن الأصل درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
استيراد المكوّن الابن
استخدموا import القياسي الخاص بوحدات ES في أعلى المكوّن الأب لاستيراد المكوّن الابن.
<script>
import Greeting from "./Greeting.svelte";
</script>استخدام الوسم
صيّروا المكوّن الابن بكتابة وسم يحمل اسمه بحروفه الأولى الكبيرة.
<Greeting />تمرير قيم ثابتة
مرروا سلسلة نصية حرفية باستخدام سمات بين علامتي اقتباس.
<Greeting name="Ada" />تمرير قيم ديناميكية
مرروا تعبير JavaScript بإحاطة القيمة بأقواس معقوفة.
<Greeting name={userName} />اختصار الاسم نفسه
إذا كان للـ prop والمتغير الاسم نفسه، فاستخدموا الاختصار {name}.
<Greeting {name} />عدة props
يمكنكم دمج props الثابتة والديناميكية والمختصرة بأي ترتيب.
<Card title="Tasks" {items} count={items.length} />تمرير props باستخدام spread
مرروا كائنًا من props باستخدام الصيغة {...obj}.
<Card {...cardProps} />Props شرطية
ادمجوا العوامل الثلاثية لتوفير قيم شرطية.
<Button label={isLoading ? "Saving..." : "Save"} />الاختصار المنطقي
مرروا السمة المنطقية من دون قيمة لتعيينها على true.
<Toggle disabled />الدوال كـ props
يمكنكم تمرير مراجع الدوال كـ props لاستخدامها كدوال رد اتصال.
<Modal onClose={() => (open = false)} />Props كائنات
مرروا الكائنات كاملة عندما تنتقل قيم مترابطة كثيرة معًا.
<UserCard user={currentUser} />تحقق سريع
كيف تمررون متغيرًا كـ prop؟
مراجعة
استوردوا المكوّن، واستخدموا الوسم، ومرروا props باستخدام القيم الحرفية أو التعبيرات أو الاختصار أو spread.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «تمرير الخصائص من المكوّن الأصل» مجاني؟
نعم — نص درس «تمرير الخصائص من المكوّن الأصل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «تمرير الخصائص من المكوّن الأصل»؟
مرّر القيم إلى خصائص المكوّنات الابنة في قالب المكوّن الأصل تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «تمرير الخصائص من المكوّن الأصل»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- التصريح بالخصائص باستخدام export let
- تمرير الخصائص من المكوّن الأصل
- القيم الافتراضية للخصائص
- تمرير الخصائص باستخدام $$props و$$restProps