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

در Vue.js، ارتباط بین کامپوننت‌ها معمولاً از طریق Props و Emit انجام می‌شود. در حالی که Props برای ارسال داده‌ها از کامپوننت والد به فرزند کاربرد دارد، Emit برای انتقال رویدادها از فرزند به والد استفاده می‌شود. به کمک Emit، کامپوننت‌های فرزند می‌توانند اطلاعات یا رویدادهای خاصی را به والد ارسال کنند تا والد بتواند نسبت به آن‌ها واکنش نشان دهد. این مقاله به بررسی عملکرد و کاربرد Emit در Vue.js می‌پردازد.

مفهوم Emit در Vue.js

در Vue.js، Emit یک روش برای برقراری ارتباط یک‌طرفه از فرزند به والد است. به کمک Emit می‌توان از داخل کامپوننت فرزند یک رویداد خاص ایجاد کرد و والد می‌تواند این رویداد را شنود کند و واکنش مناسب نشان دهد. این فرآیند برای ایجاد تعاملات بین کامپوننت‌ها و جلوگیری از تداخل مستقیم داده‌ها استفاده می‌شود.

نحوه استفاده از $emit برای ارسال رویدادها

برای ارسال یک رویداد از فرزند به والد، کافی است از $emit در داخل کامپوننت فرزند استفاده کنید. در والد، می‌توانید از v-on یا مخفف آن @ برای شنود این رویداد استفاده کنید.

مثال ساده: استفاده از $emit برای ارسال یک رویداد کلیک از فرزند به والد

ChildComponent.vue:

< template >
  < button @click = " sendEvent " > Click Me < / button >
< / template >

export default {
  methods : {
    sendEvent ( ) {
      this.$emit ( ' clicked ' ) ;
    }
  }
};

ParentComponent.vue:

< template >
  < div >
    < h1 > Parent Component < / h1 >
    < ChildComponent @clicked = " handleChildClick " / >
  < / div >
< / template >

import ChildComponent from ' ./ChildComponent.vue ' ;

export default {
  components : {
    ChildComponent
  } ,
  methods : {
    handleChildClick ( ) {
      alert ( ' Button clicked in Child Component ' ) ;
    }
  }
} ;

در این مثال:

• در ChildComponent، متد sendEvent اجرا شده و از this.$emit('clicked') برای ارسال رویداد clicked به والد استفاده شده است.

• در ParentComponent، رویداد clicked با @clicked="handleChildClick" شنود می‌شود و متد handleChildClick در واکنش به این رویداد اجرا می‌شود.

ارسال داده با $emit

گاهی اوقات نیاز دارید که علاوه بر اعلام رویداد، داده‌ای را نیز به والد ارسال کنید. می‌توانید این داده‌ها را به عنوان پارامتر دوم در $emit ارسال کنید.

مثال ارسال داده با $emit:

ChildComponent.vue:

< template >
  < button @click = " sendData " > Send Data < / button >
< / template >

export default {
  methods : {
    sendData ( ) {
      const data = ' Hello from Child ' ;
      this.$emit ( ' send-data ' ,  data ) ;
    }
  }
} ;

ParentComponent.vue:

< template >
  < div >
    < ChildComponent @send-data = " handleData " / >
  < / div >
< / template >

import ChildComponent from ' ./ChildComponent.vue ' ;

export default {
  components : {
    ChildComponent
  } ,
  methods : {
    handleData ( receivedData ) {
      console.log ( receivedData ) ; // Output: "Hello from Child"
    }
  }
} ;

در این مثال:

• sendData از $emit برای ارسال رویداد send-data به همراه داده data استفاده می‌کند.

• در ParentComponent، متد handleData داده دریافت‌شده از فرزند را پردازش می‌کند.

ارسال رویدادهای پیچیده با چندین پارامتر

اگر نیاز دارید که چندین پارامتر را از طریق $emit ارسال کنید، می‌توانید آن‌ها را به صورت آرایه یا شیء ارسال کنید.

مثال ارسال چندین پارامتر به صورت شیء:

this.$emit ( ' send-info ' , { name : ' Vue.js ' , version : ' 3.0 ' } ) ;

در این مثال، والد می‌تواند اطلاعات name و version را به راحتی از شیء ارسال شده دریافت کند.

ایجاد رویدادهای اختصاصی با $emit

رویدادهای ارسال‌شده با $emit می‌توانند نام‌های دلخواه و اختصاصی داشته باشند. برای مثال، می‌توانید رویدادهایی مانند submit, cancel, update, و غیره ایجاد کنید. این رویدادها را به گونه‌ای نام‌گذاری کنید که مفهوم و هدفشان به‌خوبی مشخص باشد.

شنود چندگانه رویدادها در والد

می‌توانید در کامپوننت والد چندین رویداد را به طور همزمان شنود کرده و متدهای مختلفی را به آن‌ها اختصاص دهید.

مثال شنود چندین رویداد:

< ChildComponent @submit = " handleSubmit " @cancel = " handleCancel " / >

در اینجا، ParentComponent دو رویداد submit و cancel را شنود می‌کند و برای هرکدام متدی جداگانه در نظر می‌گیرد.

ترکیب Props و Emit برای ارتباط دوطرفه

در Vue.js برای ایجاد ارتباط دوطرفه، Props و Emit به صورت ترکیبی استفاده می‌شوند. در این حالت، والد یک Prop به فرزند ارسال می‌کند و فرزند به کمک $emit، هرگونه تغییر یا رویدادی را به والد برمی‌گرداند.

مثال استفاده از Props و Emit برای ارتباط دوطرفه:

ChildComponent.vue:

< template >
  < input :value = " value " @input = " updateValue " / >
< / template >

export default {
  props: [ ' value ' ] ,
  methods : {
    updateValue ( event ) {
      this.$emit ( ' input ' , event.target.value ) ;
    }
  }
};

ParentComponent.vue:

< template >
  < ChildComponent v-model = " parentValue " / >
  < p > Value: { { parentValue } } < / p >
< / template >

import ChildComponent from ' ./ChildComponent.vue ' ;

export default {
  components : {
    ChildComponent
  } ,
  data ( ) {
    return {
      parentValue : ' '
    } ;
  }
} ;

در این مثال:

• ChildComponent، Prop value را از والد دریافت می‌کند و هر تغییری در ورودی، به کمک $emit('input', newValue) به والد ارسال می‌شود.

• در ParentComponent، از v-model برای ارتباط دوطرفه داده‌ها استفاده می‌شود که به صورت خودکار، تغییرات در parentValue را به فرزند ارسال و دریافت می‌کند.

بهترین شیوه‌ها در استفاده از Emit و انتقال رویدادها

• نام‌گذاری رویدادها به صورت توصیفی: نام رویدادها باید مفهومی و توصیفی باشند تا عملکرد آن‌ها واضح باشد.

• پرهیز از دستکاری مستقیم Props: به جای تغییر Props در فرزند، از $emit برای ارسال تغییرات به والد استفاده کنید.

• مدیریت ارتباطات پیچیده با Vuex: در پروژه‌های بزرگ، به جای ارسال و دریافت مکرر رویدادها بین کامپوننت‌های عمیق، از Vuex یا یک مدیریت وضعیت مرکزی برای سادگی و خوانایی بیشتر استفاده کنید.

نتیجه‌گیری

در Vue.js، $emit یک ابزار قوی برای ارسال رویدادها و داده‌ها از فرزند به والد است. با استفاده از این ابزار و ترکیب آن با Props، می‌توانید ارتباط موثری بین کامپوننت‌ها برقرار کنید و برنامه‌ای ساختارمند و منظم بسازید. آشنایی با بهترین شیوه‌های استفاده از Emit به شما کمک می‌کند تا رویدادها را به شکل موثری مدیریت کرده و از پیچیدگی کد بکاهید.