الفتحات المسمّاة باستخدام slot="name"
حدّد نقاط إدراج متعددة في مكوّن باستخدام الفتحات المسمّاة
الفتحات المسمّاة باستخدام slot="name" درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
سبب استخدام slots المسمّاة
تحتاج المكوّنات غالبًا إلى مواضع إدراج متعددة، مثل الترويسة والمحتوى والتذييل.
تعريف slots المسمّاة
أضيفوا السمة name إلى عنصر slot في الابن.
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>ملء slots المسمّاة
من المكوّن الأب، ميّزوا العناصر باستخدام السمة slot="name".
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>الخلط بين الافتراضي والمسمّى
يملأ المحتوى الذي لا يحتوي على سمة slot الـslot الافتراضي. وينتقل المحتوى المسمّى إلى slot الذي يحمل اسمه.
استقلالية الترتيب
لا يهم الترتيب في المكوّن الأب؛ إذ تتم مطابقة كل slot حسب اسمه.
عناصر متعددة لكل slot
غلّفوا العناصر المتعددة داخل مضيف واحد يحمل سمة slot لإرسالها جميعًا إلى slot نفسه.
الترويسات الشرطية
استخدموا {#if} في المكوّن الأب لملء slots المسمّاة اختياريًا.
التخطيطات الشائعة
هذا النمط مناسب جدًا للتخطيطات التي تتضمن header/sidebar/main/footer.
مكوّنات النماذج
قد تعرّف مكوّنات النماذج slots للبادئة واللاحقة والنص المساعد وغير ذلك.
التوثيق الذاتي
تصف أسماء slots واجهة API الخاصة بالمكوّن. اختاروا أسماء وصفية مثل title أو actions.
مساعدات TypeScript
يمكنكم تحديد أنواع slots باستخدام generic خاص هو $$Slots في ملفات Svelte المكتوبة بـ TypeScript.
تحقق سريع
كيف تستهدفون slot مسمّى؟
مراجعة
عرّفوا عدة عناصر <slot name="..."> في الابن، واستهدفوها باستخدام slot="..." على عناصر المكوّن الأب.
الأسئلة الشائعة
هل درس «الفتحات المسمّاة باستخدام slot="name"» مجاني؟
نعم — نص درس «الفتحات المسمّاة باستخدام slot="name"» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «الفتحات المسمّاة باستخدام slot="name"»؟
حدّد نقاط إدراج متعددة في مكوّن باستخدام الفتحات المسمّاة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الفتحات المسمّاة باستخدام slot="name"»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات الافتراضية لإسقاط المحتوى
- الفتحات المسمّاة باستخدام slot="name"
- المحتوى الاحتياطي للفتحات
- التحقق من محتوى الفتحات باستخدام $$slots