¿Cuál es la diferencia entre la forma de vinculación de eventos
@event = 'nombre de la función'
De forma predeterminada, el objeto de evento se pasa como argumento a la función.
@event = 'nombre de función()'
no pase el objeto de evento a la función
Para pasar explícitamente el objeto de evento debe usar $event
@event = 'nombre de la función ($evento)';
@event = 'nombre de la función (parámetros 1, 2, 3..., $evento)'
Obtener el elemento DOM del objeto de evento
Consíguelo a través de e.target
Al vincular eventos de teclado, e.keyCode puede obtener la codificación de los caracteres del teclado
Por ejemplo
La página escribe un cuadro,
Enlace eventos en forma de **@event='nombre de función'**
<div class="son-box" @click="clickBox">盒子</div>
methods: {
clickBox(e){
console.log(e)//此时浏览器控制台打印出事件对象的信息
}
},
Los eventos vinculantes en este formulario pasan el objeto de evento a la función de forma predeterminada, aquí lo recibe e
Enlace eventos en forma de **@event='function name()'**
<div class="son-box" @click="clickBox()">盒子</div>
methods: {
clickBox(e){
console.log(e)//此时浏览器控制台打印undefined
}
},
Vincular eventos en este formulario no pasa el objeto de evento
Para pasar explícitamente el objeto de evento debe usar $event
Tenga en cuenta que solo se puede pasar a través de $event (no se puede pasar una escritura incorrecta y no se puede pasar otro alias)
<div class="son-box" @click="clickBox($event)">我是盒子</div>
Puede llevar parámetros adicionales
<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 obtiene el elemento dom
<div class="son-box" @click="clickBox($event)">我是盒子</div>
methods: {
clickBox(e){
console.log(e.target )//打印<div class="son-box">
}
},