أسماء الفتحات الديناميكية
v-slot:[dynamicName]، واختيار الفتحات برمجيًا، وعرض الفتحات شرطيًا
أسماء الفتحات الديناميكية درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
لماذا نستخدم أسماء Slots ديناميكية
أحيانًا لا يُعرف الـ Slot الذي تريد ملأه إلا أثناء التشغيل؛ فقد يعتمد على خاصية أو حالة أو متغير حلقة. يتيح لك Vue حساب اسم Slot باستخدام صيغة الأقواس المربعة.
صيغة الوسيط الديناميكي
ضع تعبيرًا داخل أقواس مربعة بعد v-slot:. يقيّم Vue هذا التعبير لتحديد اسم Slot المستهدف.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>الاختصار باستخدام الأقواس
يدعم الاختصار # الوسائط الديناميكية أيضًا.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>تحديد الاسم من الحالة
يمكن لتعبير الأقواس قراءة أي قيمة تفاعلية. يؤدي تبديل المتغير إلى تغيير الـ Slot الذي يُملأ بالمحتوى.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";تبديل المحتوى المعروض
عند دمج الأسماء الديناميكية مع ابن يعرّف عدة Slots مسماة، يتيح لك ذلك إبراز مناطق مختلفة من خلال template واحد، بحسب الحالة.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>اختيار الأسماء من الخصائص
يمكن لخاصية في المكوّن تحديد الـ Slot. وهذا مفيد للأغلفة القابلة للتهيئة، حيث يختار المستدعي المنطقة.
const props = defineProps({ target: String });
// use props.target inside #[props.target]التكرار عبر Slots ديناميكية
يمكنك عرض Slots داخل حلقة من خلال حساب كل اسم انطلاقًا من عنصر الحلقة، وهذا مفيد لأعمدة الجداول أو أنظمة علامات التبويب.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>أسماء بأحرف صغيرة وصالحة
ينبغي أن تُقيّم أسماء Slots الديناميكية إلى سلاسل نصية صالحة. وتُعامل القيمة Null بوصفها الـ Slot الافتراضي. تجنب المسافات والمحارف غير الصالحة في أسماء سمات HTML عند استخدام القوالب المضمّنة.
const name = condition ? "primary" : null;
// null -> default slotاختيار Slot بشكل شرطي
يختار تعبير شرطي ثلاثي داخل الأقواس بين Slots بناءً على شرط، وكل ذلك داخل القالب.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>حالة استخدام لمكوّن علامات التبويب
يمكن لمكوّن Tabs عرض محتوى علامة التبويب النشطة من خلال حساب اسم Slot انطلاقًا من معرّف علامة التبويب المحددة، مع الحفاظ على أسلوب تصريحي في المكوّن الأب.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>حافظ على وضوحه
تتمتع Slots الديناميكية بقدرات قوية، لكنها قد تخفي الغرض من الشفرة. فضّل استخدامها عندما تكون مجموعة Slots معتمدة فعلًا على البيانات؛ أما إذا كانت مجموعة ثابتة صغيرة، فستكون Slots المسماة العادية أوضح.
اختبار سريع
ما الصيغة التي تختار Slot يُحسب اسمه أثناء التشغيل؟
مراجعة
تعلمتم أن أسماء slot الديناميكية تستخدم صيغة الأقواس v-slot:[expr] أو #[expr] لحساب الـ slot الذي يجب ملؤه من props أو الحالة، مما يتيح إنشاء أغلفة قابلة للتهيئة وأنظمة تبويب وعرض أعمدة يعتمد على البيانات.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «أسماء الفتحات الديناميكية» مجاني؟
نعم — نص درس «أسماء الفتحات الديناميكية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «أسماء الفتحات الديناميكية»؟
v-slot:[dynamicName]، واختيار الفتحات برمجيًا، وعرض الفتحات شرطيًا تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «أسماء الفتحات الديناميكية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات المسماة والفتحة الافتراضية
- الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب
- أسماء الفتحات الديناميكية
- المحتوى الاحتياطي للفتحات والتحقق منها