Шпаргалка по обработке событий Vue

Обработка событий Vue - необходимый аспект каждого проекта Vue.

В этой статье я расскажу об основах и приведу несколько примеров кода для работы с событиями. Он будет просто включать советы / методы, которые я считаю наиболее полезными, для более глубокого изучения всего, что может делать Vue, ознакомьтесь с документацией по Vue.

Базовая обработка событий

Используя директиву v-on (для краткости @) мы можем прослушивать события DOM и запускать либо метод обработчика, либо встроенный Javascript.

Мы рассмотрим некоторые из наиболее распространенных событий, которые вы, возможно, захотите зафиксировать. Щелкните здесь, чтобы увидеть полный список событий DOM.

Создание пользовательских событий

В дополнение к событиям DOM мы можем создавать собственные события, используя метод экземпляра $emit. Затем это настраиваемое событие может обрабатываться родительским компонентом экземпляра, который генерирует событие.

// Child Component 
this.$emit('close') 

// Parent Component 
<child-component @close='handleClose' />

Мы также можем передавать данные нашему родительскому компоненту. Это важно, потому что это метод достижения двусторонней привязки данных в наших компонентах.

// Child Component 
this.$emit('close', false) 
// Parent Component 
<child-component @close='isOpen = $event' />

Обработка модификаторов мыши

Вот список основных событий мыши DOM, которые мы можем зафиксировать в нашей директиве v-on:

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='handleEvent'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
Interact with Me!
</div>

Для наших событий щелчка мы также можем добавить модификаторы событий мыши, чтобы ограничить, какие кнопки мыши будут запускать наше событие. Их три (по одному на каждую кнопку): left, right и middle.

<!-- This will only trigger for the left mouse click -->
<div @mousedown.left='handleLeftClick'> Left </div>

Ключевые модификаторы

Есть три события клавиатуры DOM, которые мы можем прослушать

<input
   type='text'
   placeholder='Type something'
   @keypress='handkeKeyPressed'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>

Часто мы хотим обнаружить эти события на определенном ключе, это можно сделать двумя способами.

Коды клавиш
Vue имеет псевдонимы для определенных ключей (enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released -->
<input
   type='text'
   placeholder='Type something'
   @keyup.enter='handleEnter'
/>

<!-- OR -->
<input
   type='text'
   placeholder='Type something'
   @keyup.13='handleEnter'
/>

Системные модификаторы

Для определенных проектов мы можем захотеть запускать события, только если пользователь нажимает клавишу-модификатор. Клавиша-модификатор - это что-то вроде команды или сдвига.

Во Vue есть четыре системных модификатора.

shift
alt
ctrl
meta (cmd на mac и клавиша windows на windows)

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

<!-- Custom Shortcut that creates a list for Shift + 8 -->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56='createList'
/>

В документации Vue также присутствует модификатор exact, гарантирующий, что событие будет запущено только в том случае, если будут нажаты только указанные нами клавиши и никакие другие.

<!-- Custom Shortcut that creates a list for Shift + 8 ONLY -->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56.exact='createList'
/>

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

Для всех событий DOM мы можем использовать некоторые модификаторы, которые меняют способ их запуска. Независимо от того, останавливает ли он распространение или предотвращает действие по умолчанию, Vue имеет несколько встроенных модификаторов событий DOM.

<!-- Prevent Default Action -->
<form @submit.prevent>

<!-- Stop Event Propagation -->
<form @submit.stop='submitForm'>

<!-- Easy to Join Modifiers -->
<form @submit.stop.prevent='submitForm'>

<!-- Prevent event from being triggered more than once -->
<div @close.once='handleClose'>

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

Эта тема более сложная. По сути, каждый экземпляр Vue имеет свойство $listeners, которое содержит его родительские v-on прослушиватели событий.

Использование этого свойства может быть действительно полезно, когда мы хотим вызвать обработчики событий методов из дочернего элемента без необходимости создавать длинную цепочку $emit

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

VueDose написал фантастическую статью об этих« адаптивных компонентах », и вот мой главный вывод.

Один случай может быть, когда у нас есть базовый компонент, скажем BaseList, и вы хотите создать аналогичный компонент с некоторыми дополнительными функциями поверх него, например SortableList. Я называю их Адаптивные компоненты (также прокси или компоненты оболочки). При создании адаптивного компонента вы обычно хотите, чтобы SortableList сохранял тот же API, что и исходный BaseList, чтобы компоненты были согласованными. Это означает, что из SortableList вам нужно передать все реквизиты и прослушать все события BaseList.

Из VueDose

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

<BaseList
  v-on='$listeners'
/>

Если нам нужен больший контроль над вызываемыми слушателями, мы можем добавить деструктуризацию объекта и вычисляемое свойство для выбора нужных нам элементов.

<BaseList
   @click='click'
   v-on='listeners'
/>

// ...

computed: {
  listeners: () => {
    const { click, ...listeners } = this.$listeners;
    return listeners;
}

Заключение

Надеюсь, эта короткая шпаргалка дала вам лучшее представление об обработке событий Vue и возможных возможностях.

Как всегда, я рекомендую также проверить Официальную документацию Vue, чтобы более подробно изучить особенности обработки событий Vue.

Удачного кодирования!

Если вы хотите узнать больше о Vue 3, скачайте мою бесплатную шпаргалку по Vue 3 с такими важными знаниями, как Composition API, синтаксис шаблона Vue 3 и обработка событий.

Первоначально опубликовано на https://learnvue.co 30 января 2020 г.

Шпаргалка по обработке событий Vue - Основы