Что делает метод $emit в Vue.js?

Метод $emit используется для генерации пользовательских событий из дочернего компонента. Это основной способ взаимодействия дочернего компонента с родительским в однонаправленном потоке данных Vue. Он позволяет дочернему компоненту уведомить родителя о том, что произошло какое-то событие, и, при необходимости, передать ему данные.

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

1. В дочернем компоненте вызывается $emit('eventName', payload).
   • eventName - строка, название события, которое будет сгенерировано.
   • 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 позволяет сохранять принцип однонаправленного потока данных, предотвращая прямое изменение состояния родителя дочерним компонентом. Дочерний компонент лишь сигнализирует о происходящем, а обработка и изменение состояния происходят в родительском компоненте.