События и обработчики

В Element Plus события играют ключевую роль при взаимодействии компонентов с приложением. Каждый компонент библиотеки поддерживает набор стандартных событий, которые можно использовать для отслеживания действий пользователя, изменения состояния компонентов и выполнения кастомной логики.

Синтаксис привязки событий

События в Element Plus привязываются с помощью директивы v-on или её сокращённой формы @. Общий синтаксис:

<el-button @click="handleClick">Нажми меня</el-button>

Здесь click — название события, а handleClick — метод в компоненте Vue, который будет вызван при его срабатывании.

Для передачи аргументов в обработчик используется функция стрелки:

<el-input @input="value => handleInput(value)"></el-input>

Это позволяет передавать текущее значение компонента или дополнительные параметры.

Основные типы событий

1. События мыши и клика Практически все интерактивные компоненты, такие как el-button, el-checkbox, el-switch, поддерживают события:

  • click — срабатывает при нажатии.
  • dblclick — двойной клик.
  • mouseenter и mouseleave — наведение мыши.

Пример:

<el-button @mouseenter="hoverHandler" @mouseleave="leaveHandler">Наведи на меня</el-button>

2. События изменения данных Для компонентов ввода (el-input, el-select, el-date-picker) основными событиями являются:

  • input — срабатывает при изменении значения.
  • change — срабатывает после завершения ввода и подтверждения значения.

Пример с el-select:

<el-select v-model="selected" @change="handleChange">
  <el-option label="Опция 1" value="1"></el-option>
  <el-option label="Опция 2" value="2"></el-option>
</el-select>

Здесь v-model связывает выбранное значение с переменной selected, а @change реагирует на изменение выбора.

3. События формы Формы (el-form) и их элементы поддерживают события валидации и отправки:

  • validate — событие после вызова метода validate.
  • submit — при отправке формы.

Пример:

<el-form ref="formRef" @submit.prevent="onSubmit">
  <el-form-item label="Имя" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-button type="primary" native-type="submit">Отправить</el-button>
</el-form>

Метод onSubmit может использоваться для дополнительной логики перед отправкой данных.

Пользовательские события

Компоненты Element Plus также поддерживают пользовательские события через emit. Это особенно важно при создании кастомных обёрток над элементами библиотеки.

Пример создания компонента-обёртки с пользовательским событием:

<template>
  <el-button @click="handleClick">Кастомная кнопка</el-button>
</template>

<script>
export default {
  emits: ['custom-click'],
  methods: {
    handleClick() {
      this.$emit('custom-click', { timestamp: Date.now() });
    }
  }
}
</script>

Использование:

<custom-button @custom-click="onCustomClick"></custom-button>

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

Vue позволяет использовать модификаторы событий вместе с компонентами Element Plus:

  • .stop — остановка всплытия события.
  • .prevent — предотвращение действия по умолчанию.
  • .once — событие срабатывает один раз.
  • .capture — событие срабатывает на фазе захвата.

Пример:

<el-button @click.stop="handleClick">Не всплывать</el-button>
<el-form @submit.prevent="submitForm">...</el-form>

Доступ к нативным событиям DOM

Некоторые компоненты оборачивают нативные элементы, поэтому для доступа к стандартным событиям можно использовать модификатор .native:

<el-input @focus.native="onFocus"></el-input>

Однако начиная с Vue 3, использование .native заменяется обычной передачей событий через v-model и emits.

Обработка событий с динамическими данными

События можно привязывать динамически через объект v-on:

<el-button v-for="btn in buttons" :key="btn.id" v-on="btn.events">
  {{ btn.label }}
</el-button>

Пример структуры объекта events:

buttons: [
  { id: 1, label: 'Кнопка 1', events: { click: () => doSomething(1) } },
  { id: 2, label: 'Кнопка 2', events: { click: () => doSomething(2) } }
]

Это упрощает работу с большим количеством компонентов и единообразно обрабатывает события.

Использование ref и прямой доступ к методам компонентов

Через ref можно получать доступ к методам компонентов и вызывать их напрямую:

<el-input ref="inputRef"></el-input>

this.$refs.inputRef.focus(); // Фокус на поле ввода

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

Лайфхаки и лучшие практики

  1. Разделение логики и шаблона — все обработчики лучше выносить в methods или setup, чтобы шаблон оставался чистым.

  2. Деструктуризация событий — удобно извлекать необходимые свойства из объекта события:

    handleClick({ target, type }) {
  console.log(target, type);
}

  3. Использование .once для временных уведомлений — предотвращает многократное срабатывание одного действия.

  4. Комбинирование с v-model — упрощает синхронизацию состояния компонентов с событиями изменения.

События и обработчики в Element Plus позволяют гибко управлять поведением компонентов, создавать кастомные элементы, и обеспечивать качественный UX при работе с формами, кнопками и интерактивными элементами. Правильное использование событийных модификаторов и методов компонента делает код более читаемым и поддерживаемым.

Оглавление