الفتحات المسماة والفتحة الافتراضية
المتعددة، و ، والصياغة المختصرة #name
الفتحات المسماة والفتحة الافتراضية درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ما هي Slots
تتيح Slots للعنصر الأب تمرير ترميز إلى المكوّن الابن. ويحدد الابن موضع ظهور ذلك المحتوى باستخدام العنصر <slot>. هذا هو توزيع المحتوى في Vue.
الـ Slot الافتراضي
يُسمى <slot> الذي لا يحمل اسمًا الـ Slot الافتراضي. وكل ما يضعه الأب بين وسمَي المكوّن يظهر فيه.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>استخدام الـ Slot الافتراضي
يضع المكوّن الأب المحتوى ببساطة داخل وسمَي المكوّن.
<Card>
<p>This goes into the default slot</p>
</Card>لماذا نستخدم Slots مسماة
تحتوي مكوّنات كثيرة على مواضع إدراج متعددة، مثل الرأس والمحتوى والتذييل. تمنح Slots المسماة كل منطقة معرّفًا، لكي يستهدفها المكوّن الأب بشكل مستقل.
تعريف Slots مسماة
أضف خاصية name إلى كل Slot. ويمكن للمكوّن الجمع بين Slots مسماة وSlot افتراضي واحد (غير مسمى).
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>ملء Slots المسماة باستخدام v-slot
في المكوّن الأب، ضع المحتوى داخل <template> مع توجيه v-slot:name لاستهداف Slot مسمى.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>اختصار #
لـ v-slot: اختصار هو #. لذلك تصبح v-slot:header بالشكل #header. وهذه هي الصيغة الاصطلاحية الموجزة.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>المحتوى الافتراضي بين الوسوم
ينتقل المحتوى الموضوع مباشرة بين وسمي المكوّن (وليس داخل template مسمى) إلى الـ Slot الافتراضي. ويمكنك استهدافه صراحةً باستخدام #default أيضًا.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>الدمج بين التضمين الضمني والصريح
يمكنك كتابة المحتوى الافتراضي بصورة مباشرة، وSlots المسماة داخل templates، ضمن الاستخدام نفسه. ويوجّه Vue كل جزء إلى الموضع الصحيح بحسب اسمه.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>ترتيب العرض
لا يهم ترتيب Slots في المكوّن الأب؛ فقالب المكوّن الابن هو الذي يتحكم في التخطيط النهائي. يظهر محتوى Slot دائمًا في الموضع الذي وضع فيه الابن عنصر <slot> المطابق.
مكوّن تخطيط عملي
تجعل Slots المسماة أغلفة التخطيط قابلة لإعادة الاستخدام. يستطيع <BaseLayout> واحد استضافة أي صفحة من خلال قبول Slots للرأس والشريط الجانبي والمحتوى الرئيسي.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>اختبار سريع
ما اختصار v-slot:header؟
مراجعة
تعلمت أن Slots توزّع ترميز المكوّن الأب داخل المكوّن الابن. ويكون <slot> غير المسمى هو الـ Slot الافتراضي، بينما يؤدي إضافة name إلى إنشاء Slots مسماة. يملؤها الأب باستخدام <template v-slot:name> أو الاختصار #name، ويحدد قالب الابن مواضعها النهائية.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «الفتحات المسماة والفتحة الافتراضية» مجاني؟
نعم — نص درس «الفتحات المسماة والفتحة الافتراضية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «الفتحات المسماة والفتحة الافتراضية»؟
المتعددة، و ، والصياغة المختصرة #name تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «الفتحات المسماة والفتحة الافتراضية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات المسماة والفتحة الافتراضية
- الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب
- أسماء الفتحات الديناميكية
- المحتوى الاحتياطي للفتحات والتحقق منها