آموزش Emit در Vue.js | انتقال رویداد از کامپوننت فرزند به والد

در Vue.js، کامپوننت‌ها قرار نیست ذهن‌خوان باشند. هر کدام وظیفه خودش را دارد و اگر قرار است با هم حرف بزنند، باید راه درستش را بلد باشند. یکی از مهم‌ترین این راه‌ها emit و انتقال رویداد از کامپوننت فرزند به والد است.

اگر این بخش را درست نفهمی، دیر یا زود پروژه‌ات تبدیل می‌شود به مجموعه‌ای از کامپوننت‌های عصبی که هیچ‌کدام نمی‌دانند دیگری چه می‌کند.

Emit در Vue.js چیست؟

emit مکانیزمی است برای ارسال رویداد از کامپوننت فرزند (Child) به کامپوننت والد (Parent).

• فرزند یک اتفاق را اعلام می‌کند

• والد تصمیم می‌گیرد با آن اتفاق چه کار کند

یعنی:

• فرزند حرف می‌زند، والد تصمیم می‌گیرد.

چرا به Emit نیاز داریم؟

در Vue:

• Props → انتقال داده از والد به فرزند

• Emit → انتقال رویداد از فرزند به والد

اگر بخواهی:

• کلیک یک دکمه در فرزند

• ارسال فرم

• تغییر وضعیت داخلی کامپوننت

را به والد اعلام کنی، تنها راه تمیز و استاندارد همین emit است.

ساخت یک Emit ساده (مثال پایه)

کامپوننت فرزند

< template >
  < button @click = " sendEvent " >
    ارسال به والد
  < / button >
< / template >

export default {
  methods : {
    sendEvent ( ) {
      this.$emit ( ' custom-event ' )
    }
  }
}

در اینجا:

• custom-event نام رویداد است

• هیچ منطقی در فرزند اجرا نمی‌شود

• فقط اعلام می‌کند که یک اتفاق افتاده

کامپوننت والد

< template >
  < ChildComponent @custom-event = " handleEvent " / >
< / template >

import ChildComponent from ' ./ChildComponent.vue '

export default {
  components : { ChildComponent } ,
  methods : {
    handleEvent ( ) {
      console.log ( ' رویداد از فرزند دریافت شد ' )
    }
  }
}

والد:

• به رویداد گوش می‌دهد

• واکنش مناسب را انجام می‌دهد

ارسال داده همراه Emit

Emit فقط برای اعلام نیست، می‌تواند داده هم ارسال کند.

فرزند

this.$emit('submit-form', this.formData)

والد

< ChildComponent @submit-form = " handleSubmit " / >

methods : {
  handleSubmit ( data ) {
    console.log ( data )
  }
}

اینجا:

• فرزند داده را ارسال می‌کند

• والد مسئول پردازش آن است

و این دقیقاً همان جداسازی مسئولیت‌هاست که Vue به آن اصرار دارد.

تعریف Emit به صورت استاندارد (Vue 3)

در Vue 3 بهتر است رویدادها را شفاف تعریف کنی تا بعداً خودت هم سردرگم نشوی.

defineEmits ( [ ' submit-form ' ] )

یا در حالت معمول:

export default {
  emits : [ ' submit-form ' ]
}

این کار:

• خوانایی را بالا می‌برد

• خطاهای ناخواسته را کم می‌کند

• پروژه را حرفه‌ای‌تر نشان می‌دهد

تفاوت Emit با Callback یا Event Bus

اگر ارتباط فقط بین والد و فرزند است، Emit بهترین انتخاب است. استفاده از Store برای این کار، افراط محسوب می‌شود.

اشتباهات رایج در استفاده از Emit

• تغییر مستقیم state والد در فرزند

• استفاده از اسم‌های مبهم مثل clickEvent

• ارسال منطق به جای رویداد

• استفاده بیش از حد از emit به جای state management

Emit باید ساده، شفاف و محدود باشد.

جمع‌بندی

• Emit راه استاندارد ارتباط فرزند به والد در Vue.js است

• فرزند فقط رویداد ارسال می‌کند، نه تصمیم

• والد مسئول منطق و واکنش است

• استفاده درست از emit باعث کد تمیز، قابل نگهداری و حرفه‌ای می‌شود

اگر Vue را جدی می‌گیری، emit را هم باید درست و حسابی بلد باشی و اگر بلد نباشی، پروژه‌ات خیلی زود خودش را لو می‌دهد.