vue中绑定事件时有无小括号时的区别

事件绑定的形式有什么区别

@事件=‘函数名’

默认将事件对象作为参数传递给函数

@事件=‘函数名（）’

不传递事件对象给函数

显示地传递事件对象必须使用$event

@事件=‘函数名（$event）’ ;

@事件=‘函数名（参数1，2，3…,$event）’

获取事件对象的DOM元素

通过e.target获取

绑定键盘事件时，e.keyCode可以获取键盘符的编码

举例说明

页面写一个盒子，

以**@事件=‘函数名’**的形式绑定事件

<div class="son-box" @click="clickBox">盒子</div>

methods: {
    
    
    clickBox(e){
    
    
        console.log(e)//此时浏览器控制台打印出事件对象的信息
    }
},

以这种形式绑定事件默认传递事件对象到函数中，这里通过e来接收

以**@事件=‘函数名（）’**的形式绑定事件

<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">
   }
},