Что делает $emit ?
Спросят с вероятностью 7%

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

Как его использовать

1️⃣В дочернем компоненте:
✅Используйте метод $emit, чтобы отправить событие.
✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту.

2️⃣В родительском компоненте:
✅Слушайте это событие, используя директиву v-on или её сокращение @.
✅Обработайте событие в методе родительского компонента.

Дочерний компонент (ChildComponent.vue)

<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>

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

<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>

Пояснение

1️⃣В дочернем компоненте `ChildComponent`:
✅Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent.
✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.

2️⃣В родительском компоненте ParentComponent:
✅Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.
✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.

Почему это важно?

✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.
✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.
✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых