Vue Academy · درس

Props والأحداث المخصّصة

مرّر البيانات إلى الأسفل باستخدام Props وأطلق الأحداث إلى المكوّنات الأب

Props والأحداث المخصّصة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

التواصل بين المكوّن الأب والابن

تتواصل المكوّنات في اتجاهين:

تمرّر الخصائص البيانات من المكوّن الأب إلى الابن
ترسل الأحداث الرسائل من المكوّن الابن إلى الأب

يحافظ تدفق البيانات أحادي الاتجاه هذا على قابلية توقّع سلوك التطبيقات.

تعريف الخصائص

يعرّف المكوّن الابن الخصائص التي يقبلها. وفي script setup، استخدموا defineProps.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

الخصائص مع الأنواع

عرّفوا الخصائص ككائن لتحديد الأنواع المستخدمة في التحقّق.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

الخصائص مع القيم الافتراضية والإلزامية

يمكنكم تحديد الخصائص على أنها required وتزويدها بقيم default.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

تمرير الخصائص من المكوّن الأب

يمرّر المكوّن الأب البيانات على شكل سمات. استخدموا : لربط القيم الديناميكية.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

اصطلاح تسمية الخصائص

عرّفوا الخصائص بصيغة camelCase في JavaScript، ومرّروها بصيغة kebab-case في القوالب.

خاصية JavaScript: isActive
سمة القالب: :is-active

تحوّل Vue تلقائيًا بين الصيغتين.

الخصائص للقراءة فقط

يجب على المكوّن الابن ألا يغيّر خصائصه مباشرة.

تتدفق الخصائص في اتجاه واحد، إلى الأسفل
يؤدي تغييرها إلى صعوبة توقّع السلوك ويطلق تحذيرات
لتغيير البيانات المشتركة، أرسلوا حدثًا كي يحدّثها المكوّن الأب

تعريف الأحداث المُرسلة

يعرّف المكوّن الابن الأحداث التي يرسلها باستخدام defineEmits.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

إرسال حدث

استدعوا الدالة emit لإرسال حدث إلى الأعلى، مع إمكانية إرفاق حمولة.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

إرسال حدث باستخدام Options API

في Options API، استدعوا this.$emit بدلًا من ذلك.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

استماع المكوّن الأب إلى الأحداث

يستمع المكوّن الأب باستخدام @event-name ويتلقى الحمولة.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

اختبار سريع

اختبروا مدى فهمكم للخصائص والأحداث.

مراجعة: الخصائص والأحداث

تعلّمتم كيفية تواصل المكوّنات:

يعرّف defineProps الخصائص مع أنواعها وقيمها الافتراضية
تتدفق الخصائص إلى الأسفل وتكون للقراءة فقط
يعرّف defineEmits الأحداث
ترسل emit("name", payload) الأحداث إلى الأعلى
يستمع المكوّن الأب باستخدام @event

التالي: المنافذ والمنافذ ذات النطاق.

الأسئلة الشائعة

هل درس «Props والأحداث المخصّصة» مجاني؟

نعم — نص درس «Props والأحداث المخصّصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «Props والأحداث المخصّصة»؟

مرّر البيانات إلى الأسفل باستخدام Props وأطلق الأحداث إلى المكوّنات الأب تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «Props والأحداث المخصّصة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy