Обработка событий с помощью Vue.js

Обработка событий с помощью Vue.js

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

Обработка событий с помощью Vue

Мы можем перехватить событие, добавив директиву v-on в соответствующий элемент DOM. Допустим, мы хотим обработать нажатие на элемент кнопки — мы можем добавить следующее в шаблон Vue:

Обратите внимание, что мы добавляем в директиву аргумент v-on, он будет именем события, которое мы хотим обработать (в данном случае, click).

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Совет: директива v-on имеет удобное сокращение @, которое может быть использовано вместо v-on:, например: <button @click=»clickHandler»></button<.

Типы событий, которые вы можете обрабатывать

Кроме click, какие еще события DOM могут быть обработаны? Vue может обрабатывать любые виды веб- или мобильных событий (а также пользовательские события, о которых мы поговорим позже), включая: submit, keyup, drag, scroll и другие. Вот список наиболее распространенных событий DOM для справки.

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

Если мы свяжем метод с директивой обработки событий, мы можем запустить некоторый пользовательский код. Мы в этом примере просто выведем сообщение на консоль, однако вы также можете сделать что-нибудь более интересное, например, отобразить / скрыть другой элемент, увеличить счетчик и т. д.

Объект события

Объект event передается в обработчик событий, который открывает больше возможностей для того, как вы можете реагировать на события. Этот объект содержит множество полезных свойств и методов, включая ссылку на элемент, из которого произошло событие (event.target), время возникновения события (event.timeStamp) и многое другое.

Обратите внимание, что этот объект предоставляется собственным веб-API, а не Vue, поэтому он будет тем же объектом, который вы найдете в чистом JavaScript. Вот ссылка на интерфейс событий.

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

Распространенный шаблон в приложениях JavaScript — обрабатывать отправку формы вручную, а не использовать встроенный функционал. Чтобы сделать это, вам нужно использовать перед запуском кода обработки формы нативный метод preventDefault события submit, в противном случае страница будет перенаправлена.

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

Vue предоставляет несколько различных модификаторов событий, которые полезны в общих сценариях обработки событий:

.stop

.prevent

.capture

.self

.once

.passive

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

До сих пор мы говорили об обработке нативных событий. Но Vue — это основанный на компонентах фреймворк, поэтому можем ли мы заставить компонент генерировать собственное событие?

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

Решение заключается в том, чтобы дочерний компонент генерировал событие, а родитель прослушивал его. Для этого вызовите дочерний компонент this.$emit(«my-event»), если хотите, чтобы событие было отправлено. Например, у нас есть компонент DialogComponent, который должен сообщить своему родителю MainPage, что он был закрыт:

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

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

Совет: используйте для своих пользовательских событий имена в kebab-case! HTML нечувствителен к регистру, поэтому имя события в camel-case, например, myEvent будет в шаблоне myevent. Поэтому лучше использовать kebab-case, например, my-event и избегать путаницы.

Шина событий

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

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

Затем импортируйте шину в компонент, в который вы хотите отправить событие. Вы можете использовать метод шины Vue $emit.

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

Это делается с помощью метода шины $on, который принимает два аргумента — событие, которое вы хотите прослушивать, и обратный вызов.

И вот мы это получили — способ обмена данными между любыми компонентами вашего приложения! Совет: более масштабируемое решение для передачи данных по приложению заключается в использовании Vuex.

Автор: Anthony Gore

Источник: https://vuejsdevelopers.com

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий