الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب
slot :data='value'، وv-slot='{ data }' في جانب المكوّن الأب، ونمط خاصية العرض
الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
محدودية Slots العادية
تتيح Slots العادية للأب تمرير الترميز إلى الابن، لكن لا يستطيع الأب الوصول إلى البيانات الداخلية للابن. تحل Scoped Slots هذه المشكلة بالسماح للابن بعرض البيانات على محتوى Slot.
ربط البيانات في Slot
يربط الابن السمات على عنصر <slot> الخاص به، وتُسمى هذه السمات خصائص Slot. وتُمرَّر هذه الخصائص إلى أي محتوى يعرضه الأب.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>استقبال خصائص Slot
في المكوّن الأب، تصبح قيمة v-slot كائنًا يحتوي على جميع خصائص Slot التي ربطها الابن.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>تفكيك خصائص Slot
بما أن قيمة Slot ليست سوى كائن، يمكنك تفكيكها مباشرةً للحصول على ترميز أوضح.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>اختصار الـ Scoped Slot الافتراضي
عندما تستخدم الـ Slot الافتراضي فقط، يمكنك وضع v-slot مباشرةً على وسم المكوّن بدلًا من استخدام template متداخل.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>إعادة التسمية والقيم الافتراضية
يدعم التفكيك إعادة التسمية والقيم الافتراضية، تمامًا كما هو الحال في JavaScript العادية.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Scoped Slots مسماة
يمكن أيضًا جعل Slots المسماة ذات نطاق. ادمج الاسم مع الخصائص المفككة.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>المكوّنات عديمة العرض
تتيح Scoped Slots نمط المكوّن عديم العرض: يتولى المكوّن المنطق والحالة، لكنه لا يعرض أي ترميز خاص به، بل يوفّر البيانات عبر Slot ذات نطاق ويترك للأب تحديد واجهة المستخدم.
متتبّع فأرة عديم العرض
يتتبع المكوّن المؤشر ويعرض الإحداثيات. ولا يعرض سوى Slot الافتراضي الخاص به، مع تمرير x وy.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>استهلاك المكوّن عديم العرض
يوفّر الأب جميع العناصر المرئية ويقرأ البيانات المعروضة، مما يفصل المنطق عن العرض فصلًا تامًا.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Scoped Slots مقارنةً بـ Composables
غالبًا ما تحل Composables محل المكوّنات عديمة العرض في Vue 3 عند إعادة استخدام المنطق فقط. لكن Scoped Slots تظل أفضل عندما يجب على الابن التحكم في التكرار أو البنية، مثل قائمة أو جدول، بينما يخصص الأب كل عنصر.
اختبار سريع
كيف يستقبل المكوّن الأب البيانات التي تعرضها Scoped Slot؟
مراجعة
تعلمت أن Scoped Slots تتيح للابن عرض البيانات للأب من خلال ربط الخصائص على <slot> الخاص به. ويقرأها الأب عبر قيمة v-slot، وغالبًا بعد تفكيكها، مما يتيح إنشاء مكوّنات عديمة العرض تفصل المنطق عن العرض.
الأسئلة الشائعة
هل درس «الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب» مجاني؟
نعم — نص درس «الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب»؟
slot :data='value'، وv-slot='{ data }' في جانب المكوّن الأب، ونمط خاصية العرض تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات المسماة والفتحة الافتراضية
- الفتحات ذات النطاق: تمرير البيانات إلى المكوّن الأب
- أسماء الفتحات الديناميكية
- المحتوى الاحتياطي للفتحات والتحقق منها