أحداث المكونات ​

لقراءة هذه الصفحة يجب عليك أولا الاطلاع على أساسيات المكونات. ثم العودة إلى هنا.

الإرسال والاستماع للأحداث ​

يمكن للمكون إرسال أحداث مخصصة مباشرة في تعبيرات القالب (على سبيل المثال ، في معالج v-on) باستخدام التابع المدمج emit$:

<!-- MyComponent -->
<button @click="$emit('someEvent')">انفر الزر</button>

export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

المكون الأب يمكنه الاستماع لها باستخدام v-on:

<MyComponent @some-event="callback" />

المعدل .once مدعوم أيضًا على مستمعي أحداث المكون:

<MyComponent @some-event.once="callback" />

مثل المكونات والخصائص ، توفر أسماء الأحداث تحويل تلقائي لحالة الأحرف. يمكن ملاحظة أننا أرسلنا حدث مكتوب بنمط سنام الجمل camelCase ، لكن يمكننا الاستماع له باستخدام مستمع مكتوب بنمط أسياخ الشواء kebab-case داخل المكون الأب. كما في تسمية الخاصيات ، نوصي باستخدام مستمعي أحداث بنمط kebab-case في القوالب.

وسائط الحدث ​

في بعض الأحيان ، يكون من المفيد إرسال قيمة معينة مع الحدث. على سبيل المثال، قد نرغب في أن يكون المكون <BlogPost> مسؤولًا عن حجم تكبير النص. في هذه الحالات ، يمكننا إرسال وسائط إضافية إلى emit$ لتوفير هذه القيمة:

<button @click="$emit('increaseBy', 1)">
زيادة بـ 1
</button>

ثم، عندما نستمع إلى الحدث في المكون الأب، يمكننا استخدام الدالة السهمية السطرية كمستمع، والتي تسمح لنا بالوصول إلى وسيط الحدث المرسل:

<MyButton @increase-by="(n) => count += n" />

أو، إذا كان معالج الحدث عبارة عن تابع:

<MyButton @increase-by="increaseCount" />

ثم ستُمرَّر القيمة كأول وسيط لهذا التابع:

methods: {
  increaseCount(n) {
    this.count += n
  }
}

function increaseCount(n) {
  count.value += n
}

التصريح بالأحداث المرسلة ​

يمكن للمكون التصريح بشكل واضح عن الأحداث التي سيقوم بإرسالها باستخدام التعليمة العامة ()defineEmitsخيار emits:

<script setup>
defineEmits(['inFocus', 'submit'])
</script>

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit']
}

خيار emits يدعم أيضًا صيغة الكائن، إذا كنت تستخدم الـTypescript تستطيع تمرير وسائط ذات نوع، والتي تسمح لنا بتنفيذ التحقق من صحة الحمولة الممررة للأحداث المرسلة في وقت التشغيل :

<script setup>
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // اعد `true` أو `false` للإشارة إلى
    // نجاح / فشل التحقق
  }
})
</script>

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

export default {
  emits: {
    submit(payload: { email: string, password: string }) {
       // اعد true` أو `false` للإشارة إلى
       // نجاح / فشل التحقق
    }
  }
}

على الرغم من أن الأمر اختياري، إلا أنه ينصح بتعريف جميع الأحداث المرسلة من أجل توثيق جيد لكيفية عمل المكون. كما يسمح لـ Vue باستبعاد المستمعين المعروفين من السمات المستترة ، وتجنب الحالات القصوى الناتجة عن أحداث الـDOM الموزعة يدويا من المكتبات الخارجية.

التحقق من صحة الأحداث ​

مثلما هو الحال بالنسبة للتحقق من صحة نوع الخاصية ، يمكن التحقق من صحة الحدث المرسل إذا تم تعريفه باستخدام صيغة الكائن بدلاً من صيغة المصفوفة.

لإضافة التحقق ، يعطىالحدث دالة كقيمة والتي تتلقى الوسائط الممررة إلى الاستدعاء this.$emitemit وتعيد قيمة منطقية لتشير إلى صحة الحدث من عدمها.

<script setup>
const emit = defineEmits({
  // لا يوجد تحقق
  click: null,

  // تحقق من حدث الإرسال
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('وسائط حدث الإرسال غير صالحة!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

export default {
  emits: {
    // لا يوجد تحقق
    click: null,

    // تحقق من حدث الإرسال
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('وسائط حدث الإرسال غير صالحة!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}

الأحداث كخاصيات ​

يمكنك أيضًا تعريف وتمرير الأحداث كخاصيات، عن طريق إضافة النص on مع اسم الحدث بالحروف الكبيرة. استخدام props.onEvent له سلوك مختلف عن استخدام emit('event')، حيث سيمرر الأول فقط المستمع المعتمد على الخاصية (سواء event@ أو on-event:)

لهذا السبب، يُفضل استخدام emit('event') بدلاً من props.onEvent عند إرسال الأحداث.