Чем отличается форма привязки событий
@event = 'имя функции'
По умолчанию объект события передается в качестве аргумента функции.
@event = 'имя_функции()'
не передавать объект события в функцию
Чтобы явно передать объект события, необходимо использовать $event
@event = 'имя функции ($event)';
@event = 'имя функции (параметры 1, 2, 3..., $event)'
Получить элемент DOM объекта события
Получите это через e.target
При привязке событий клавиатуры e.keyCode может получить кодировку символов клавиатуры
например
Страница пишет коробку,
Привязать события в виде **@event='имя функции'**
<div class="son-box" @click="clickBox">盒子</div>
methods: {
clickBox(e){
console.log(e)//此时浏览器控制台打印出事件对象的信息
}
},
Привязка событий в этой форме по умолчанию передает объект события в функцию, здесь его получает e
Привязать события в виде **@event='имя функции()'**
<div class="son-box" @click="clickBox()">盒子</div>
methods: {
clickBox(e){
console.log(e)//此时浏览器控制台打印undefined
}
},
Привязка событий в этой форме не передает объект события
Чтобы явно передать объект события, необходимо использовать $event
Обратите внимание, что его можно передать только через $event (неправильная запись не может быть передана, и другой псевдоним не может быть передан)
<div class="son-box" @click="clickBox($event)">我是盒子</div>
Может нести дополнительные параметры
<div class="son-box" @click="clickBox(1,2,$event)">我是盒子</div>
methods: {
clickBox(num1,num2,e){
console.log(e)//打印事件对象信息
console.log(num1+num2);//打印3
}
},
e.target получает элемент dom
<div class="son-box" @click="clickBox($event)">我是盒子</div>
methods: {
clickBox(e){
console.log(e.target )//打印<div class="son-box">
}
},