如何理解vue中事件绑定加括号和不加括号的区别？

Vue中事件绑定加括号和不加括号的区别

1. 不带括号，不写实参的function默认传event(事件对象)

@click=“getData”
function getData(){
   console.log(event)
}

2. 只要加括号，无论是否传值，都输入传实参给函数，event(事件对象)就接收不到了

@click="getData(1)"
function getData(value){
     console.log(value)
} 

3. 如果需要实参，又需要event(事件对象)，就需要手动传入event(事件对象)

@click=getData($event,1)
function getData(e,value){
      console.log(e)
      console.log(value)
} 

扩展（extend）

Vue中的@click和React的onClick实现的原理是不一样的，React的onClick必须要接受一个函数体，如果想要加括号绑定，就会将方法执行后的返回值赋值给onClick，因此React的onClick不能加括号

render(){
    return(
          <div>
                {/*jsx 注释*/}
	            {/*使用btn不要加括号*/}
 	            <button  onClick={this.btn}>点我</button>
                 {/*jsx 要求单标签必须有闭合*/}
                 <input type="text" onFocus={this.inp}> </input>
                {/*声明方式创建的函数，引用时this指向会改变，所以需要用到bind*/}
                <button onClick={this.showName.bind(this)}></button>
                {/*箭头函数不需要bind*/}
                <button onClick={this.showName2}>点我</button>
         </div>
    )
}

Vue绑定事件是通过自定义的$on方法来实现的

带括号的话生成的代码

  on:{
       "click"：function($event){
                getData()
          }
  }

不带括号的话生成的代码

on:{
   "click":getData
}