Главная » Статьи » Обработка событий с помощью Vue.js

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

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

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

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

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

<button v-on:click="clickHandler"></button>

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

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

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

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

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

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

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

<div id="app"> <button v-on:click="clickHanlder"></button>
</div>

new Vue({ el: "#app", methods: { clickHandler () { console.log("You clicked the button!"); } }
})

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

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

clickHandler (event) { console.log(`The button was clicked at ${event.timeStamp}.`);
}

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

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

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

formHandler (event) { event.preventDefault(); // form handling logic
}

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

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

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

.stop

.prevent

.capture

.self

.once

.passive

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

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

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

ParentComponent | | (data travels down via props, never up) v ChildComponent

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

export default { methods: { onClose() { this.$emit("dialog-closed"); } }
};

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

<div> <dialog-component @dialog-closed="eventHandler" />
</div>

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

onClose() { this.$emit("dialog-closed", { time: Date.now() });
}

eventHandler (event, { time }) { console.log(`Dialog was closed at ${time}`);
}

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

Шина событий

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

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

import Vue from "vue";
export default new Vue();

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

import eventBus from "./eventBus"; export default { ... methods: { myMethod () { eventBus.$emit("my-event") } }
}

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

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

import eventBus from "./eventBus"; export default { ... created () { eventBus.$on("my-event", () => { console.log("my-event called on global event bus"); }); }
}

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

Автор: Anthony Gore

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

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