Vue.js: الفتحات

آخر تحديث: 2026-10-20

تُعد «الفتحات» جزءًا من واجهة برمجة تطبيقات توزيع المحتوى في Vue — حيث يمكن للمكونات الأصلية إدراج أي محتوى في «الفتحات» الخاصة بالمكون الفرعي. وتجعل «الفتحات» المكونات مرنةً بقدر «القوالب»: فالمكونات الأصلية تتحكم في ما يتم عرضه، بينما تتحكم المكونات الفرعية في مكان عرضه.

يقدم Vue 3 ثلاثة أنواع من الفتحات: الفتحات الافتراضية، والفتحات المسماة، والفتحات ذات النطاق. سيساعدك هذا الدرس على إتقان استخدام هذه الأنواع الثلاثة وأفضل الممارسات المتعلقة بها.

القوالب والمساعدات ذات صلة：useSlots()

1. ما ستتعلمه

• الاستخدام الأساسي للفتحة الافتراضية <slot />
• الاختصارات الخاصة بالفتحات المسماة <slot name="header" /> وv-slot:header
• فتحات النطاق: تقوم المكونات الفرعية بتمرير البيانات إلى فتحات المكون الرئيسي
• <template v-slot> قواعد الصياغة (Vue 2.6+)
• أسماء الخانات الديناميكية وقواعد كتابة الاختصارات
• محتوى الفتحة الافتراضي (المحتوى البديل)
• $slots / useSlots وصلة

2. التحدي المتمثل في عدم القدرة على تخصيص محتوى مكون البطاقة

(1) المشكلة: 5 أنماط للبطاقات، تتطلب كتابة 5 مكونات

احتاج مسؤول التجارة الإلكترونية لدى أليس إلى 5 أنواع من البطاقات:

<!-- ❌ The "Broken" Version:5 component -->
<!-- ProductCard.vue -->
<div class="card">{{ product.name }}</div>

<!-- UserCard.vue -->
<div class="card">{{ user.name }}</div>

<!-- OrderCard.vue -->
<div class="card">Order #{{ order.id }}</div>

<!-- 5 component,90% The code is the same,The only difference is the content -->

مدير المنتج تشارلي:

«أليس، أحتاج إلى 5 أنواع إضافية من البطاقات الأسبوع المقبل. لا يمكننا الاستمرار في إضافة مكونات جديدة. نحن بحاجة إلى بطاقة مرنة تقبل أي محتوى.»

(2) حل «الفتحات» في Vue: بطاقة أساسية واحدة (BaseCard)، مع محتوى مقدم من المكون الأصلي

1 BaseCard.vue → مجموعة لا حصر لها من البطاقات. في كل مرة تضيف فيها بطاقة جديدة، ما عليك سوى كتابة المحتوى — دون الحاجة إلى تعديل المكون.

(3) الإيرادات

بعد استخدام ماكينات القمار:

• عدد المكونات: 5 → 1 (-80%)
• نوع البطاقة الجديد: سطر واحد من كود «موديلو»
• تكاليف الصيانة: بمجرد تغيير نمط واحد، يتم تحديث أكثر من 5 بطاقات في آن واحد
• إمكانية إعادة الاستخدام: يمكن استخدام BaseCard في جميع الحالات المتعلقة بالبطاقات

3. الفتحة الافتراضية

(1) الاستخدام الأساسي

نتائج العرض:

<div class="card">
  <h3>Hello</h3>
  <p>This is the card content</p>
</div>

(2) المحتوى الافتراضي (الاحتياطي)

<!-- The parent component does not pass content -->
<BaseCard />

<!-- Rendering:<p>No content provided</p> -->

<!-- Passing Content from the Parent Component -->
<BaseCard>
  <p>Custom content</p>
</BaseCard>

<!-- Rendering:<p>Custom content</p>(Override Default)-->

(3) 5 حالات استخدام رئيسية

▶ مثال: 5 طرق لاستخدام بطاقة BaseCard

الإخراج:

الاستخدام 1 → بطاقة بجسم فقط
الاستخدام 2 → رأس وجسم
الاستخدام 3 → رأس وجسم وتذييل بزر
الاستخدام 5 → فتحة النطاق تمرّر user

4. الفتحات المسماة

(1) تعريف الفتحات المسماة

(2) استخدام المكونات الأصلية (3 صيغ)

(3) أسماء الخانات الديناميكية

(4) التحقق من وجود فتحة

5. فتحات النطاق

(1) نقطة أساسية: تقوم المكونات الفرعية بتمرير البيانات إلى فتحات المكون الرئيسي

نتائج العرض:

<ul>
  <li><p>1. Alice (alice@example.com)</p></li>
  <li><p>2. Bob (bob@example.com)</p></li>
  <li><p>3. Charlie (charlie@example.com)</p></li>
</ul>

(2) 5 أنماط لفتحات المنظار

(3) مثال كامل: قائمة قابلة للتخصيص

▶ مثال: تطبيق كامل على فتحات النطاق

الإخراج:

DataTable يعرض الأعمدة والصفوف افتراضيًا
الفتحة cell-status تعرض شارة بلون الحالة
الفتحة cell-actions تعرض زر Edit لكل صف

(1) 📊 4. مرجع سريع لـ 5 أخطاء شائعة

(2) 📊 5. 5 مقارنات الأداء

6. $slots و useSlots

(1) $slots الوصول إلى الفتحات

(2) useSlots (واجهة برمجة التطبيقات للتكوين)

<script setup>
import { useSlots } from 'vue'

const slots = useSlots()

// Check if the slot exists
if (slots.header) {
  console.log('Header slot exists')
}

// Dynamic Rendering
if (slots.default) {
  console.log('Default slot exists')
}
</script>

(3) $slots مقابل useSlots

▶ مثال: 5 استخدامات رئيسية لـ $slots

الإخراج:

slots.header موجود → يظهر Has header
Object.keys(slots) يحصر أسماء الفتحات
v-bind=attrs يمرّر الخصائص إلى input

7. تمرين شامل: مكوّن BaseCard بفتحات افتراضية ومسماة

▶ مثال: BaseCard.vue (الافتراضي + الفتحات المسماة)

الإخراج:

بدون فتحات → يظهر النص الافتراضي No content
مع الفتحة header → شريط رأس أعلى البطاقة
مع الفتحة footer → شريط تذييل أسفل البطاقة

القوالب والمساعدات ذات صلة：useSlots()

❓ أسئلة شائعة

📖 ملخص

• «السلوتات» هي واجهة برمجة تطبيقات توزيع المحتوى في Vue: حيث تتحكم المكونات الأم في المحتوى، بينما تتحكم المكونات الفرعية في موضع العرض
• 3 أنواع من الفتحات: الفتحة الافتراضية (<slot />)، والفتحة المسماة (name="x")، والفتحة ذات النطاق المحدد (:x="x")
• يقوم المكون الأصلي بتمرير فتحة مسماة باستخدام <template #name> أو الاختصار #name
• تتيح فتحات النطاق للمكونات الفرعية تمرير البيانات إلى المكونات الأصلية (خصائص الفتحة)
• <slot> المحتوى الافتراضي (الاحتياطي) الذي يتم عرضه عندما لا يمرر المكون الأصلي أي محتوى
• $slots / useSlots() التحقق من وجود الفتحة
• التعامل مع «السلوتات» و«العناصر المساعدة»: تقوم «العناصر المساعدة» بتمرير الإعدادات، بينما تقوم «السلوتات» بتمرير المحتوى

📝 تمارين

1. أسئلة أساسية (مستوى الصعوبة: ⭐)

   تنفيذ مكون «زر» بسيط:

   • BaseButton.vue: الفتحة الافتراضية + 3 أشكال (أساسي/نجاح/خطر)
   • props: variant (سلسلة)
   • المكون الأصلي: اختبار 3 متغيرات + محتوى مخصص للفتحة

2. مسائل متقدمة (مستوى الصعوبة: ⭐⭐)

   تنفيذ مكون BaseLayout:

   • المكونات الفرعية: 3 خانات مسماة (رأس الصفحة / الافتراضي / تذييل الصفحة)
   • المكون الأصلي: استخدم «BaseLayout» لتنفيذ صفحة لوحة التحكم
   • استخدم $slots للتحقق من وجود الفتحة
   • إضافة محتوى افتراضي (احتياطي)

3. مسألة التحدي (مستوى الصعوبة: ⭐⭐⭐)

   تنفيذ نظام مكونات DataTable كامل:

   1. DataTable.vue: يستقبل الأعمدة والبيانات، ويقوم بعرض الجدول
   2. خانة النطاق: #cell-{key} تتيح للمكونات الأصلية تخصيص الخلايا
   3. الخانة الافتراضية: تعرض القيمة الأصلية عندما لا يوفر المكون الأصلي قيمةً ما
   4. مثال على المكون الأصلي: جدول المستخدمين + جدول الطلبات — طريقتان مختلفتان لعرض الأعمدة
   5. الأداء: يقوم v-memo بتخزين الصفوف مؤقتًا (يتخطى إعادة الرسم عندما تظل البيانات دون تغيير)
   6. التعيين القوي للأنواع في TypeScript

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن