Как использовать обработчики событий?vue-17

Обработка событий — ключевая часть интерактивности Vue-приложений. Рассмотрим все аспекты работы с событиями.

1. Базовый синтаксис v-on

Директива v-on (или сокращенно @) используется для подписки на события:

<button v-on:click="handleClick">Клик</button>
<!-- Сокращенная запись -->
<button @click="handleClick">Клик</button>

2. Типы обработчиков

Методы компонента:

<button @click="submitForm">Отправить</button>

methods: {
  submitForm() {
    // Логика обработки
  }
}

Инлайн-обработчики:

<button @click="count++">Добавить: {{ count }}</button>

Вызов с параметрами:

<button @click="sayHello('John')">Привет</button>

3. Доступ к исходному событию

Используйте $event для доступа к нативному событию:

<input @input="handleInput($event)" />

methods: {
  handleInput(event) {
    console.log(event.target.value);
  }
}

4. Модификаторы событий

Vue предоставляет удобные модификаторы:

Базовые:

<form @submit.prevent="onSubmit">...</form>

Доступные модификаторы:

  • .stop - event.stopPropagation()
  • .prevent - event.preventDefault()
  • .capture - режим capture
  • .self - только если событие на самом элементе
  • .once - сработает один раз
  • .passive - passive event listeners

Для клавиатуры:

<input @keyup.enter="submit" />
<input @keyup.esc="cancel" />

Модификаторы мыши:

<div @click.middle="middleClick">Средняя кнопка</div>
<div @click.right.prevent="rightClick">Правая кнопка</div>

5. Кастомные события

Генерация событий в дочерних компонентах:

this.$emit('my-event', payload);

Прослушивание в родительском:

<child-component @my-event="handleEvent" />

6. Нативные события в компонентах

Для прослушивания нативных событий на корневом элементе компонента:

<my-component @click.native="handleClick" />

7. Управление несколькими событиями

<div
  @click="handleClick"
  @mouseover="handleMouseOver"
  @mouseout="handleMouseOut"
>
  Интерактивный элемент
</div>

Резюмируем

Ключевые моменты обработки событий: ✔ Используйте v-on или @ для подписки на события
✔ Можете вызывать методы или использовать инлайн-выражения
✔ Доступ к нативному событию через $event
✔ Используйте модификаторы для частых задач (.stop, .prevent)
✔ Кастомные события через $emit для коммуникации компонентов
✔ Модификаторы клавиш упрощают обработку ввода

Лучшие практики:

  1. Избегайте сложной логики в инлайн-обработчиках
  2. Используйте осмысленные имена для кастомных событий
  3. Для клавиатурных событий предпочтительнее .key модификаторы
  4. В сложных случаях рассматривайте Event Bus или Vuex

Правильная обработка событий делает приложение более отзывчивым и поддерживаемым.

Вопросы

Собеседования