ماهي $emit في vue

تستخدم الدالة $emit داخل المكون الابن Child لارسال حدث مخصص event إلى المكون الأب.

تاخذ الدالة معاملين الأول هو اسم الحدث ثانيا ياخذ اي معلومات اضافية.

مثال المكون الابن:

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

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', 'Hello from child!');
    }
  }
}
</script>

مثال المكون الاب:

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

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleEvent(message) {
      console.log(message); // "Hello from child!"
    }
  }
}
</script>

$emit هي طريقة في Vue نستخدمها لإرسال (emit) حدث مخصص من مكون إبن (Child Component) إلى المكون الأب (Parent Component). وتستخدم هذه الطريقة عندما يحتاج المكون الإبن إلى إبلاغ أو إرسال رسالة أو حدث للمكون الأب عند حدوث شيء معين مثل نقر زر في المكون الإبن وتنفيذ شئ ما في المكون الأب.

حيث المكون الإبن لا يمكنه تعديل بيانات الأب مباشرة لذلك نرسل حدث أو رسالة إلى المكون الأب باستخدام $emit والأب يستمع لهذا الحدث وينفذ الكود الذي حددناه.

إليك المثال التالي:

ملف المكون الإبن :

<template>
  <button @click="notifyParent">Click</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('my-event', 'Hello From Child');
    }
  }
}
</script>

هنا يتم إرسال حدث اسمه "my-event" مع قيمة (payload) وهي "Hello From Child".

الآن في المكون الأب :

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

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleEvent(message) {
      console.log(message); // هنا سيتم طباعة الرسالة التي أرسلناها من المكون الإبن
    }
  }
}
</script>

ويمكنك إرسال أكثر من قيمة إذا أردت هكذا :

this.$emit('event-name', { id: 5, text: 'Mohamed' });

غذا نستخدم emit عندما نريد أن يتفاعل المكون الأب مع شيء حدث داخل المكون الإبن مثل الضغط على زر أو إدخال بيانات أو اختيار من قائمة أو إرسال نموذج .

إليك مثال اخر لتطبيق toDoList حيث مثلا نريد عند الضغط على زر حذف نحذف المهمة .

فمثلا في المكون الإبن :

<template>
  <div class="todo-item">
    <span>{{ task }}</span>
    <button @click="deleteTask">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['task', 'index'],
  methods: {
    deleteTask() {
      this.$emit('delete-task', this.index);
    }
  }
}
</script>

وفي المكون الأب :

<template>
  <div>
    <h2>List Items</h2>
    <TodoItem
      v-for="(task, i) in tasks"
      :key="i"
      :task="task"
      :index="i"
      @delete-task="removeTask"
    />
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: { TodoItem },
  data() {
    return {
      tasks: ['Playing', 'Write', 'Read']
    };
  },
  methods: {
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
}
</script>

هنا عند استلام الحدث delete-task، يتم تنفيذ دالة removeTask لحذف المهمة من المصفوفة.

$emit هي ميزة في Vue.js تسمح للمكونات الفرعية (Child Components) بإرسال أحداث مخصصة إلى المكونات الأبوية (Parent Components)، وهي الطريقة الأساسية للتواصل من الأسفل إلى الأعلى في هيكل المكونات.

ففي Vue.js يمكن للمكونات الفرعية إرسال أحداث مخصصة إلى مكوناتها الأبوية باستخدام دالة $emit، وهذه العملية تسمى "إصدار" الحدث وبمجرد أن يصدر المكون الفرعي حدثا ما يمكن للمكون الأبوي "الاستماع" لهذا الحدث المحدد باستخدام رمز @ أو توجيه v-on.

والاستخدام بسيط جدا في المكون الفرعي تكتب

this.$emit('اسم-الحدث', البيانات)

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

@اسم-الحدث="دالة-للتعامل-مع-الحدث"

للاستماع والاستجابة للحدث.