Какво прави методът $emit във Vue.js?

Методът $emit се използва за генериране на персонализирани събития от дете-компонент. Това е основният начин, по който дете-компонентът взаимодейства с родителския си компонент във Vue, в еднопосочен поток от данни. Той позволява на детето да уведоми родителя, че е настъпило събитие, и при необходимост да му предаде данни.

Принцип на работа:

1. В детския компонент се извиква $emit('имеНаСъбитието', payload).
   • имеНаСъбитието - низ, името на събитието, което ще бъде генерирано.
   • payload (по избор) - всякакви данни, които искате да предадете на родителския компонент.
2. В родителския компонент, при използване на детския компонент, това събитие се слуша с помощта на директивата v-on или кратката форма @.
3. Когато събитието с посоченото име бъде генерирано от детския компонент, съответният обработчик в родителския компонент се изпълнява.

Пример:

Детски компонент (ChildComponent.vue):

<template>
  <button @click="handleClick">Натисни ме</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Генерираме събитието 'buttonClicked' без payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Родителски компонент (ParentComponent.vue):

<template>
  <!-- Слушаме събитието 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Този метод ще се изпълни, когато детският компонент генерира 'buttonClicked'
      console.log('Бутонът в детския компонент беше натиснат!');
    }
  }
}
</script>

$emit позволява да се запази принципът на еднопосочен поток от данни, като се предотвратява пряката промяна на състоянието на родителя от детския компонент. Детският компонент само сигнализира за случилото се, а обработката и промяната на състоянието се извършват в родителския компонент.