Обработка событий
Vue.js реализован с мощной, но простой в использовании системой событий, которая покрывает большинство наших ежедневных потребностей в разработке, когда речь идет о взаимодействии с пользователем. В этой серии мы рассмотрим все части системы событий в Vue, которые вы могли бы использовать в своих проектах.
Начнем с обработки событий.
Введение
Вот простой компонент Vue со строкой текста и кнопкой:
Когда пользователь нажимает на кнопку, мы хотим показать диалог с сообщением. Итак, нам нужно привязать событие клика к элементу <button>. Чтобы привязать событие к элементу в шаблоне Vue, мы можем использовать директиву Vue v-on, а событие — это встроенное событие click:
Обычно мы будем использовать ярлык v-on @:
Это означает, что при нажатии элемента <button> Vue попытается найти функцию обратного вызова (обработчик событий) с именем showDialog и выполнить ее. Теперь нам нужно определить эту функцию.
Если мы определим обычную функцию JavaScript, как показано ниже:
Будет ли он работать при нажатии на кнопку?
Это не сработает, и мы получили ошибку в консоли:
"Свойство или метод "showDialog" не определены в экземпляре..."
Это указывает на то, что функция обратного вызова должна быть определена в экземпляре, в нашем случае здесь, в экземпляре VueComponent (поскольку мы находимся внутри компонента Vue). Место для размещения функции в экземпляре VueComponent — это опция methods, поэтому давайте переместим в нее обратный вызов:
Теперь отображается диалоговое окно предупреждения.
Используйте v-on:xxxx или @xxxx для привязки (прослушивания) события. xxxx — это имя события, которое может быть встроенным событием, например click, или настраиваемым событием.
Передача аргументов
Может ли метод showDialog получать аргументы? Да, на самом деле, если мы добавим параметр в определение функции и распечатаем его после нажатия:
Мы видим, что это объект события (типа PointerEvent, который является собственным событием DOM). Поскольку это собственное событие, мы можем получить доступ к его свойству target:
По умолчанию Vue передает собственный объект DOM в качестве первого аргумента в функцию обратного вызова события (обработчик события).
Теперь, если мы хотим передать аргумент в showDialog из template, мы можем поместить аргумент в круглые скобки после имени метода. Например:
Это работает, как и ожидалось, но мы все еще можем захотеть получить доступ к объекту события, так что мы можем сделать это?
Нет, выход undefined. Чтобы решить эту проблему, Vue реализовал ключевое слово $event, и если мы добавим его в качестве второго аргумента в шаблоне:
Метод получает объект события.
$event работает как заполнитель в шаблоне Vue. Когда Vue анализирует шаблон и сканирует $event, он заменяет его объектом события DOM.
Можем ли мы поменять порядок text и $event вот так?
Да, тогда $event будет передано в 1-й параметр, определенный в методе, а text во 2-й параметр.
Порядок аргументов в шаблоне соответствует порядку их передачи в параметры обратного вызова события.
@click="showDialog()"работает так же, как @click="showDialog($event)", разница в том, что вторая форма позволяет получить доступ к объекту события и передать аргументы.
`this` внутри обратных вызовов событий
Теперь давайте посмотрим на this внутри нашего метода обратного вызова события, распечатав его:
Он указывает на текущий компонент, то есть экземпляр VueComponent. В этом экземпляре мы видим обратный вызов события showDialog, определенный в опции methods. [[TargetFunction]] — это ƒ showDialog(event, text), что означает, что Vue выполнит эту функцию ƒ showDialog(event, text) при запуске события. Также [[BoundThis]] указывает, что ключевое слово this в showDialog привязано к текущему экземпляру VueComponent (текущему компоненту). Vue делает это автоматически, и мы можем это проверить:
Мы создали свойство data и сохранили значение this в mounted, которое указывает на текущий экземпляр компонента. Затем в теле метода showDialog мы делаем сравнение, и оба this и this.instance указывают на один и тот же объект:
До сих пор мы определяли showDialog как традиционную функцию, что, если изменить ее на функцию стрелки?
Теперь this внутри showDialog становится undefined, потому что стрелочные функции не имеют собственной привязки this. Таким образом, когда строка 15 ссылается на this, она поднимается и ищет во внешнем контексте, которого нет, поэтому this в строке 15 получает undefined.
Все функции, которыми управляет Vue, например. методы, вычисляемые функции, наблюдатели и т. д. лучше быть традиционными функциями. Это может гарантировать, что их this всегда указывает на текущий экземпляр VueComponent. (Привязка выполняется Vue при создании экземпляра компонента.)
Хорошо, это завершает часть 1 этой серии, увидимся в следующем разделе.
Вот еще несколько статей о Vue.js:
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 1
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 2
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 3
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 4
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 5
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 6
Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 7
