v-on:click(简写@click)绑定事件加括号和不加括号

应该是 Vue 对函数调用表达式额外用了一个函数做了层包装。

事先说明：加与不加括号的区别在于事件对象参数 event 的处理。不加括号时，函数第一个参数为 event，加了括号后，需要手动传入 $event 才能获得事件对象。

1、如果事件绑定的方法没有参数可以选择加括号也可以不加括号

 1 <template>
 2   <div>
 3     <input type="button" value="按钮1" v-on:click="fn">
 4     <input type="button" value="按钮2" v-on:click="fn()">
 5   </div>
 6 </template>
 7 
 8 <script>
 9   export default {
10     data() {
11       return {
12         a:10
13       }
14     },
15     methods:{
16       fun(){
17         console.log(this.a)
18       }
19     }
20   }
21 </script>

上面的函数调用的时候，加不加括号，效果是一样的。

2、如果不加括号，函数的第一个参数为 event 。

 1 <template>
 2   <div>
 3     <input type="button" value="按钮1" v-on:click="fn">
 4   </div>
 5 </template>
 6 
 7 <script>
 8   export default {
 9     data() {
10       return {
11         a:10
12       }
13     },
14     methods:{
15       fun(e){
16         console.log(e)
17       }
18     }
19   }
20 </script>

3、如果加了括号，需要手动传入 $event 才能获得事件对象。

<template>
  <div>
    <input type="button" value="按钮1" v-on:click="fn($event)">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        a:10
      }
    },
    methods:{
      fun(e){
        console.log(e)
      }
    }
  }
</script>

如果 v-on:click="fn()" 这里不手动添加 $event ，那么 fun 函数里面的 console.log(e) 打印出来的就是 undefined 。

4、父子组件的引用：

　　涉及到父子组件的引用，有时候需要传递额外的参数，必须加括号，第一个参数为 $event ，后面跟额外的参数，具体可参考 vue父子组件之间的传额外的参数