ما هي الـ slots والـ scoped slots؟

Question

Accepted Answer

**الـ Slots** تسمح للمكون الأب بتمرير **محتوى قالب (template content)** إلى مكون فرعي — وهي الطريقة التي تبني بها أغلفة مرنة وقابلة لإعادة الاستخدام (بطاقات، نوافذ منفثقة، تخطيطات) حيث يتحكم المستهلك في الترميز الداخلي. ## الـ slot الأساسي ```vue ``` ```vue

Title

Any content!

``` يعرّف المكون الفرعي "فتحة" (``); ويملأها الأب بأي ترميز يريده. هذا أكثر مرونة بكثير من تمرير نصوص عبر الخصائص (props). ## الـ Named slots — نقاط إدراج متعددة ```vue ``` ```vue

Main content (default slot)

``` ## الـ Scoped slots — المكون الفرعي يمرر البيانات للأعلى إلى محتوى الـ slot أحيانًا يكون لدى المكون الفرعي بيانات يحتاجها محتوى الـ slot للأب (مثل كل عنصر في قائمة). **الـ Scoped slots** تعريض البيانات من المكون الفرعي إلى قالب الأب: ```vue ``` ```vue ``` الـ Scoped slots هي المفتاح لـ **المكونات بدون واجهة (renderless/headless components)**: يتعامل المكون الفرعي مع المنطق (الحلقات، جلب البيانات، الحالة) ويترك الأب يتحكم بالكامل في العرض التقديمي. ## لماذا يهم الـ Slots هي آلية توزيع المحتوى في Vue — ضرورية للمكونات التخطيطية والأغلفة القابلة لإعادة الاستخدام. الـ Named slots توفر نقاط إدراج متعددة، والـ Scoped slots (التي تعريض بيانات المكون الفرعي لقوالب معرّفة من الأب) تفعّل أنماطًا قوية مثل المكونات بدون واجهة والقوائم والجداول القابلة للتخصيص. وهي ما تجعل مكونات Vue قابلة للتركيب بدلاً من أن تكون جامدة.