التصريح بالخصائص باستخدام export let
أتِح خصائص المكوّنات للمكوّنات الأصلية باستخدام الكلمة المفتاحية export
التصريح بالخصائص باستخدام export let درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
الـ props هي exports
لإعلان prop، اكتبوا export let name في script الخاص بالمكوّن. وتُتيح الكلمة المفتاحية export استخدامه من المكوّنات الأب.
<script>
export let name;
</script>
<p>Hello {name}!</p>عدة props
أدرجوا العدد الذي يحتاج إليه المكوّن من props.
<script>
export let title;
export let count;
export let onClick;
</script>Props محددة الأنواع
أضيفوا الأنواع باستخدام TypeScript لتعزيز الأمان ودعم المحرر.
<script lang="ts">
export let count: number;
export let label: string;
</script>لماذا export
الكلمة المفتاحية export في سياق script مقتبسة من وحدات ES، لكنها تعني في Svelte «إتاحة الاستخدام للمكوّن الأب».
مطلوبة أم اختيارية
تكون props التي لا تملك قيمة افتراضية مطلوبة. أضيفوا قيمة افتراضية لجعلها اختيارية.
export let title = "Untitled";اصطلاح القراءة فقط
تعاملوا مع props على أنها مدخلات للقراءة فقط. يُسمح بتعديلها تقنيًا، لكن ذلك يخرق تدفق البيانات أحادي الاتجاه.
Props تفاعلية
تتسم props بالتفاعلية: عندما يمرر المكوّن الأب قيمة جديدة، يُعاد تصيير المكوّن تلقائيًا.
الدوال الافتراضية
يمكن أن تكون القيم الافتراضية دوال أو تعبيرات محسوبة.
export let onClick = () => {};Props منطقية
بالنسبة إلى props المنطقية، يؤدي توفير السمة من دون قيمة إلى تعيينها على true.
<MyComp disabled />Props ذات أسماء مستعارة
إذا كان اسم prop كلمة محجوزة مثل class، يمكنكم إعادة تسميته داخليًا.
let className;
export { className as class };الأسماء المستعارة المُعاد تسميتها
يتيح نمط الاسم المستعار قبول أسماء مناسبة لـ HTML مع الاحتفاظ بمعرّفات صالحة في JavaScript من الداخل.
تحقق سريع
كيف تعلنون عن prop؟
مراجعة
تُعلن props باستخدام export let، ويمكن تحديد أنواعها وتعيين قيم افتراضية لها، كما أنها تفاعلية عند تحديثها من المكوّن الأب.
الأسئلة الشائعة
هل درس «التصريح بالخصائص باستخدام export let» مجاني؟
نعم — نص درس «التصريح بالخصائص باستخدام export let» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «التصريح بالخصائص باستخدام export let»؟
أتِح خصائص المكوّنات للمكوّنات الأصلية باستخدام الكلمة المفتاحية export تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «التصريح بالخصائص باستخدام export let»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- التصريح بالخصائص باستخدام export let
- تمرير الخصائص من المكوّن الأصل
- القيم الافتراضية للخصائص
- تمرير الخصائص باستخدام $$props و$$restProps