خصائص المكوّنات وEmits
مرّر البيانات إلى الأسفل باستخدام defineProps، وأرسل الأحداث إلى الأعلى باستخدام defineEmits، وتحقّق من الخصائص باستخدام قيود type وrequired.
خصائص المكوّنات وEmits درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
الخصائص Props في Vue 3
تنقل Props البيانات من المكوّن الأب إلى المكوّن الابن. استخدم defineProps() في <script setup> لتعريفها. تكون Props للقراءة فقط في المكوّن الابن — ولا تعدّلها مباشرةً أبداً.
<script setup lang="ts">
const props = defineProps<{
title: string;
count?: number;
variant?: 'primary' | 'secondary';
}>();
</script>
<template>
<h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>استخدام withDefaults للقيم الافتراضية للخصائص
غلّف defineProps() باستخدام withDefaults() لتوفير قيم افتراضية.
<script setup lang="ts">
const props = withDefaults(defineProps<{
count?: number;
variant?: 'primary' | 'secondary';
}>(), {
count: 0,
variant: 'primary'
});
</script>تمرير Props في القالب
مرّر القيم الثابتة كسمات عادية. ومرّر القيم الديناميكية باستخدام v-bind (:). ومرّر السمات المنطقية بمجرد وجودها، من دون قيمة.
<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />Emits — التواصل من الابن إلى الأب
يتواصل الأبناء مع المكوّن الأب عبر إصدار الأحداث. استخدم defineEmits() لتعريف الأحداث التي يمكن للمكوّن إصدارها، ثم استدعِ دالة emit المُعادة.
<script setup lang="ts">
const emit = defineEmits<{
update: [value: string];
close: [];
submit: [data: FormData];
}>();
function handleSubmit(data: FormData) {
emit('submit', data); // fire the event
}
</script>الاستماع إلى Emits في المكوّن الأب
استخدم @eventName في القالب للاستماع إلى الأحداث المخصّصة الصادرة عن المكوّنات الابنة.
<SearchInput
@update="searchTerm = $event"
@submit="handleSearch"
/>v-model مع المكوّنات المخصّصة
يُعد v-model على مكوّن مخصّص اختصاراً لـ :modelValue + @update:modelValue. ويجب أن يقبل المكوّن الخاصية وأن يصدر حدث التحديث.
<!-- Parent: -->
<MyInput v-model="email" />
<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>
<template>
<input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>روابط v-model متعددة
تدعم Vue 3 استخدام عدة روابط v-model في مكوّن واحد مع معدِّلات مُسمّاة.
<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />التحقّق من Props
في Options API أو عند تعريف Props وقت التشغيل، أضف قيود type وrequired وvalidator. ويوفّر defineProps() المستند إلى TypeScript ذلك وقت الترجمة.
Props مقارنةً بـ Data — التدفق أحادي الاتجاه
تفرض Vue تدفقاً أحادي الاتجاه للبيانات: تنتقل Props من الأب إلى الابن، وتنتقل الأحداث من الابن إلى الأب. إذا احتاج الابن إلى تعديل البيانات، فإنه يصدر حدثاً ويتولى الأب معالجة التحديث.
Slots كبديل عن Props
للمحتوى الذي ينبغي أن يكون HTML أو مكوّنات، وليس مجرد بيانات، استخدم Slots. يوفّر الأب المحتوى داخل وسمَي المكوّن، ثم يعرضه الابن باستخدام <slot />.
<!-- Parent: -->
<Card title="Hello">
<p>This content goes in the default slot.</p>
</Card>
<!-- Card.vue: -->
<template>
<div class="card">
<h2>{{ title }}</h2>
<slot /> <!-- renders the p tag -->
</div>
</template>تحقّق سريع
كيف يتواصل مكوّن Vue الابن مع المكوّن الأب لإبلاغه بحدث؟
مراجعة: Props وEmits
يُستخدم defineProps لتعريف Props مع تحديد أنواعها. ويُستخدم withDefaults للقيم الافتراضية. تكون Props للقراءة فقط في الأبناء. ويُستخدم defineEmits لتعريف الأحداث المُصدرة وتحديد أنواعها. استخدم @eventName في الأب للاستماع. v-model = :modelValue + @update:modelValue. تدفق البيانات أحادي الاتجاه: Props إلى الأسفل، والأحداث إلى الأعلى. استخدم Slots لتمرير المحتوى أو أجزاء القوالب.
الأسئلة الشائعة
هل درس «خصائص المكوّنات وEmits» مجاني؟
نعم — نص درس «خصائص المكوّنات وEmits» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «خصائص المكوّنات وEmits»؟
مرّر البيانات إلى الأسفل باستخدام defineProps، وأرسل الأحداث إلى الأعلى باستخدام defineEmits، وتحقّق من الخصائص باستخدام قيود type وrequired. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «خصائص المكوّنات وEmits»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Vue SFC: script وtemplate وstyle
- واجهة Options API: data وmethods وcomputed
- التوجيهات: v-if وv-for وv-bind وv-on
- خصائص المكوّنات وEmits