v-on参数传递问题和修饰符的作用

v-on参数传递问题

<div @onclick='getTarget'>点击</div>
//下面是vue实例methods属性的内容
methods:{
    
    
	getTarget(){
    
    
}
}

当通过methods定义方法,以供@click调用时,需要注意参数问题

情况一

---

如果该方法不需要额外参数,那么方法后面的()可以不加

• 但是需要注意,如果方法中本身有一个参数,那么默认会将原生的event事件对象作为参数传递进去.

情况二

如果需要同时传入参数,又同时需要用到event时,可以通过在方法的括号中添加$event传入事件

<div @onclick='getTarget(abc,$event)'>点击</div>
//下面是vue实例methods属性的内容
methods:{
    
    
	getTarget(abc,event){
    
    
}
}

v-on修饰符的作用

• .stop 调用stopPropagation()
• .prevent - 调用 eventDefault()
• .{KeyCode | keyAlias} -只当事件是从特定键触发时才会触发回调
• .native 监听组件根元素的原生事件
• .once - 只触发一次回调
• .self 只触发该元素本身的事件