defineProps وdefineEmits
خصائص مكتوبة باستخدام defineProps ()، وأحداث باستخدام defineEmits ()، وقيم افتراضية باستخدام withDefaults()
defineProps وdefineEmits درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
التواصل بين المكونات
تتلقى المكونات البيانات عبر props وترسل الرسائل إلى الأعلى عبر events. وفي <script setup> تعلن عنها باستخدام وحدتي الماكرو defineProps وdefineEmits.
استخدام defineProps بطريقة وقت التشغيل
يمكنك تعريف props باستخدام كائن وقت التشغيل، تمامًا كما في Options API. ويعمل ذلك في JavaScript وTypeScript.
<script setup>
const props = defineProps({
title: String,
count: Number
})
console.log(props.title)
</script>استخدام defineProps مع نوع عام في TypeScript
في TypeScript، مرّر نوعًا عبر generic للحصول على props أنظف ومتحقق من أنواعها. يحوّل المترجم النوع إلى تعريفات وقت التشغيل.
<script setup lang="ts">
const props = defineProps<{
title: string
count: number
}>()
</script>props اختيارية باستخدام ?
أضف علامة استفهام إلى خاصية في النوع لجعلها اختيارية. قد تكون props الاختيارية بقيمة undefined إذا لم يمررها المكوّن الأب.
<script setup lang="ts">
const props = defineProps<{
title: string
subtitle?: string
}>()
</script>القيم الافتراضية باستخدام withDefaults
لا يوفّر الشكل المعتمد على النوع مكانًا للقيم الافتراضية، لذلك يوفّر Vue الدالة withDefaults. غلّف defineProps ومرّر كائنًا للقيم الافتراضية.
<script setup lang="ts">
const props = withDefaults(defineProps<{
title?: string
count?: number
}>(), {
title: 'Untitled',
count: 0
})
</script>استخدام props في القالب
إن props تفاعلية. ارجع إليها مباشرةً في القالب، أو عبر props.x في الشيفرة.
<template>
<h1>{{ title }}</h1>
<p>Count: {{ count }}</p>
</template>props للقراءة فقط
لا تعدّل prop داخل المكوّن الابن أبدًا. تنتقل props في اتجاه واحد: من الأب إلى الابن. إذا احتجت إلى نسخة محلية قابلة للتحرير، فاشتقها باستخدام computed أو ref محلي.
تعريف الأحداث باستخدام defineEmits
تعلن defineEmits عن الأحداث التي يمكن للمكوّن إطلاقها. ويأخذ الشكل الخاص بوقت التشغيل مصفوفةً من أسماء الأحداث.
<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>أحداث محددة الأنواع باستخدام TypeScript
يتيح لك الشكل المعتمد على النوع تحديد أسماء الأحداث وأنواع الحمولات أيضًا. ويساعد ذلك على اكتشاف أخطاء مثل إطلاق حدث بنوع وسيطة غير صحيح.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'submit', payload: string): void
(e: 'cancel'): void
}>()
</script>إطلاق حدث مع حمولة
استدعِ emit مع اسم الحدث وأي بيانات. ويستمع المكوّن الأب باستخدام @submit ويتلقى الحمولة.
<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>جمع الأجزاء معًا
يتلقى المكوّن الابن prop باسم title ويطلق حدثًا باسم submit. ويتفاعل المكوّن الأب مع كليهما — بيانات نظيفة ومحددة الأنواع تنتقل في اتجاه واحد، إلى جانب أحداث صريحة.
<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>اختبار سريع
اختبر فهمك لـ props وemits.
مراجعة
تعلّمت كيفية إدخال البيانات وإخراجها من المكونات باستخدام <script setup>:
- تعلن
definePropsعن المدخلات، سواء باستخدام كائن وقت التشغيل أو generic في TypeScript. - استخدم
?مع props الاختيارية وwithDefaultsللقيم الافتراضية. - إن props للقراءة فقط وتنتقل في اتجاه واحد.
- تعلن
defineEmitsعن الأحداث، مع إمكانية تحديد الأسماء والحمولات بالأنواع.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «defineProps وdefineEmits» مجاني؟
نعم — نص درس «defineProps وdefineEmits» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «defineProps وdefineEmits»؟
خصائص مكتوبة باستخدام defineProps ()، وأحداث باستخدام defineEmits ()، وقيم افتراضية باستخدام withDefaults() تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «defineProps وdefineEmits»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مقدمة إلى script setup
- defineProps وdefineEmits
- defineExpose وuseAttrs
- استيراد Composables واستخدامها في script setup