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父子组件之间的传额外的参数
