مكوّنات Vue العامة
defineComponent مع Generics، وscript setup عام، وخصائص Slots مكتوبة الأنواع
مكوّنات Vue العامة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
المكوّنات العامة
تعمل بعض المكوّنات مع أي نوع من البيانات — مثل قائمة أو قائمة اختيار أو جدول محدد النوع. يتيح لكم Vue 3.3 كتابة مكوّنات عامة، بحيث يحتفظ المستهلك بالاستنتاج الكامل للأنواع بدلًا من الرجوع إلى any.
السمة generic
أضيفوا سمة generic إلى <script setup>. فهي تعرّف معاملات الأنواع المتاحة في كامل السكربت، تمامًا كما يحدث في الدالة العامة.
<script setup lang="ts" generic="T">
// T can now be used below
</script>الخصائص العامة
استخدموا معامل النوع في defineProps. يقبل المكوّن هنا مصفوفة من أي نوع T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>استنتاج النوع عند الاستدعاء
عندما يمرّر المكوّن الأب items، يستنتج TypeScript قيمة T من البيانات — ولا حاجة إلى تحديد النوع صراحةً. مرّروا أرقامًا، وعندها يجب أن تكون selected رقمًا.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->تقييد النوع
أضيفوا extends لفرض شكل معيّن. يجب أن يحتوي T هنا على id، وهو أمر مفيد للقوائم المفهرسة.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>معاملات أنواع متعددة
عرّفوا عدة معاملات تفصل بينها فواصل، تمامًا كما في توقيع الدالة العامة.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>خصائص الفتحات محددة النوع
ادمجوا الأنواع العامة مع الفتحات محددة النوع حتى يُحدَّد نوع محتوى الفتحة أيضًا. عرّفوا توقيع الفتحة باستخدام defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>عرض الفتحة العامة
مرّروا كل عنصر إلى الفتحة في القالب. ويتلقّى المكوّن الأب خصائص الفتحة محددة النوع بشكل صحيح.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>الاستهلاك مع الاستنتاج
يحصل المكوّن الأب تلقائيًا على item محددة النوع ضمن نطاق الفتحة، استنادًا إلى المصفوفة التي مرّرها.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>الأحداث العامة
تنتقل معاملات الأنواع أيضًا إلى defineEmits، ولذلك يمكن لحمولة الحدث أن تحمل النوع العام.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>متى تستخدمون الأنواع العامة
استخدموا المكوّنات العامة عندما يكون المكوّن مستقلًا فعلًا عن نوع البيانات وتريدون أن ينتقل الاستنتاج عبره — مثل القوائم والجداول والإكمال التلقائي. أما مع أشكال البيانات الثابتة، فالمكوّن العادي محدد النوع أبسط.
اختبار سريع
اختبروا معرفتكم بالمكوّنات العامة.
مراجعة
لقد تعلّمتم المكوّنات العامة:
- عرّفوا معاملات الأنواع باستخدام السمة generic في script setup.
- استخدموها في defineProps للبيانات المستقلة عن النوع مثل items: T[].
- قيّدوا الأنواع باستخدام extends وأضيفوا معاملات متعددة.
- حدّدوا أنواع خصائص الفتحات باستخدام defineSlots حتى يحصل المستهلكون على الاستنتاج الكامل.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «مكوّنات Vue العامة» مجاني؟
نعم — نص درس «مكوّنات Vue العامة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «مكوّنات Vue العامة»؟
defineComponent مع Generics، وscript setup عام، وخصائص Slots مكتوبة الأنواع تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «مكوّنات Vue العامة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد TypeScript في مشاريع Vue
- خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits
- كتابة أنواع Composables وRefs
- مكوّنات Vue العامة