Frontend | Вопросы собесов

Что делает $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 разработчика. Ставь 👍 если нравится контент



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