مهر کدر - آموزش 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	استاندارد، امن، توصیه‌شده
Callback	قابل استفاده ولی شلوغ
Event Bus	منسوخ و دردسرساز
Store (Pinia/Vuex)	برای stateهای سراسری