المحتوى الاحتياطي للفتحات والتحقق منها
محتوى الفتحة الافتراضي، واستخدام useSlots() للتحقق من توفير الفتحة، والعرض الشرطي
المحتوى الاحتياطي للفتحات والتحقق منها درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
المحتوى الاحتياطي لـ slot
يمكن أن يحتوي <slot> على ترميز افتراضي. إذا وفّر المكوّن الأب محتوى لهذا الـ slot، فسيكون محتوى الأب هو المستخدم؛ وإذا لم يوفّره، فسيتم عرض المحتوى الاحتياطي داخل الـ slot.
تعريف محتوى احتياطي
ضعوا المحتوى الافتراضي بين وسمَي slot. فهذا يوفر قيمة افتراضية مناسبة للـ slots الاختيارية.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>المحتوى الاحتياطي أثناء التنفيذ
إذا لم يمرّر المكوّن الأب أي محتوى، فستظهر كلمة "إرسال". وإذا مرّر الأب محتوى، فسيحل محل المحتوى الاحتياطي.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->المحتوى الاحتياطي للـ slots المسماة
تدعم الـ slots المسماة المحتوى الاحتياطي أيضًا. ويمكن لـ slot العنوان أن يعرض عنوانًا قياسيًا افتراضيًا عندما لا يوفّره المكوّن الأب.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>مشكلة الأغلفة الفارغة
قد ترغبون أحيانًا في عرض عنصر غلاف، مثل حاوية تذييل، فقط عندما يوفّر المكوّن الأب محتوى فعليًا للـ slot. ولتحقيق ذلك، يجب التحقق من وجود slot.
التركيب useSlots
في <script setup>، تعيد useSlots() كائنًا تمثل مفاتيحه أسماء الـ slots التي تم توفيرها. وكل قيمة فيه هي دالة تعيد vnodes الخاصة بالـ slot.
import { useSlots } from "vue";
const slots = useSlots();التحقق من تمرير slot
استدعوا دالة الـ slot وتحققوا من أن المحتوى صادق. يوجد slots.header فقط إذا وفّر المكوّن الأب ذلك الـ slot؛ ويعيد استدعاء slots.header?.() بأمان الـ vnodes الخاصة به.
const hasHeader = computed(() => !!slots.header);عرض الغلاف بشكل مشروط
استخدموا هذا التحقق مع v-if حتى يظهر عنصر الغلاف فقط عند وجود محتوى، مما يمنع إنشاء عقد DOM فارغة.
<header v-if="slots.header">
<slot name="header" />
</header>سبب استخدام السلسلة الاختيارية
تحمي slots.header?.() من كون الـ slot غير معرّف. ومن دون السلسلة الاختيارية، يؤدي استدعاء slot غير معرّف إلى حدوث خطأ. ويشيع هذا النمط في دوال التصيير وعمليات التحقق المحسوبة.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }استخدام $slots في القالب
تتيح القوالب البيانات نفسها عبر $slots. ويمكنكم التحقق من $slots.footer مباشرةً داخل v-if من دون استيراد useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>جمع الأجزاء معًا
يعرض مكوّن البطاقة المتين كل قسم فقط عندما يتم توفير slot الخاص به، مما يحافظ على نظافة الترميز ويجعل الأنماط قابلة للتنبؤ.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>تحقق سريع
كيف تتحققون من أن المكوّن الأب وفّر slot باسم "header" في script setup؟
مراجعة
تعلمتم أن الـ slots يمكن أن تحتوي على محتوى احتياطي يُعرض عندما لا يوفّر المكوّن الأب الـ slot. ولعرض الأغلفة بشكل مشروط، تحققوا من وجود الـ slot باستخدام useSlots() (slots.header?.()) في script setup أو $slots.header في القوالب.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «المحتوى الاحتياطي للفتحات والتحقق منها» مجاني؟
نعم — نص درس «المحتوى الاحتياطي للفتحات والتحقق منها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «المحتوى الاحتياطي للفتحات والتحقق منها»؟
محتوى الفتحة الافتراضي، واستخدام useSlots() للتحقق من توفير الفتحة، والعرض الشرطي تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «المحتوى الاحتياطي للفتحات والتحقق منها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات المسماة والفتحة الافتراضية
- الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب
- أسماء الفتحات الديناميكية
- المحتوى الاحتياطي للفتحات والتحقق منها