تمرير snippets كخصائص
اقبل قيم snippets كخصائص لبناء واجهات برمجية مرنة للغاية للمكوّنات.
تمرير snippets كخصائص درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
المقطع كخاصية
يمكن تمرير المقاطع إلى المكوّنات الفرعية مثل أي قيمة أخرى.
التعريف والتمرير
عرّف المقطع مباشرةً في المكوّن الأب، وأشِر إليه باسمه.
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />الاستلام في المكوّن الفرعي
عرّف المقطع كخاصية مَعْلَمية.
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}نمط Render Props
يعمّم هذا النمط نمط Render Props المستخدم في React. يتحكم المكوّن الأب في طريقة تصيير المكوّنات الفرعية.
التخصيص
يمكن لمكوّنات أبوية مختلفة توفير مقاطع مختلفة، ما يتيح تخصيص التخطيط بالكامل.
خصائص المقاطع المعرّفة بالأنواع
عند استخدام TypeScript، عرّف نوع معامل المقطع لكي تحصل المكوّنات الفرعية على الإكمال التلقائي.
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();المقاطع الاختيارية
يمكن أن تكون خصائص المقاطع اختيارية؛ ولا تُصيّر المقطع إلا عند توفيره.
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}مقطع children
يُعرَض المقطع الافتراضي باسم children في $props().
let { children } = $props();
{@render children()}قوة التركيب
تمثّل خصائص المقاطع الأساس لمكتبات واجهة المستخدم عديمة الواجهة والقابلة للتركيب.
استيراد TypeScript
استورد نوع Snippet من svelte للحصول على تعريف أنواع صحيح.
import type { Snippet } from "svelte";مقارنة بالفتحات
خصائص المقاطع أكثر مرونة من الفتحات: فهي تقبل معاملات ويمكن تصييرها بشكل مشروط.
اختبار سريع
كيف تستلم مقطعًا كخاصية؟
مراجعة
مرّر المقاطع كخصائص لقلب اتجاه التحكم: يوفّر المكوّن الأب منطق التصيير، ويستدعيه المكوّن الفرعي عبر @render.
الأسئلة الشائعة
هل درس «تمرير snippets كخصائص» مجاني؟
نعم — نص درس «تمرير snippets كخصائص» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «تمرير snippets كخصائص»؟
اقبل قيم snippets كخصائص لبناء واجهات برمجية مرنة للغاية للمكوّنات. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تمرير snippets كخصائص»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- $props() للخصائص ذات الأنواع
- {#snippet} و {@render}
- تمرير snippets كخصائص
- snippets الافتراضية والمسمّاة