目标:
搞清楚调用 methods 中的方法时,什么时候传的是 "原生事件对象"。
demo:页面有一个数字和两个按钮 "加1" 和 "加10",点哪个就让数字加上相应的数值。
<div id="app">
点击次数:{{ count }}
<button @click="add">加1</button> // 1、两个按钮,分别为 加1 和 加10
<button @click="add(10)">加10</button>
</div>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add(value) { // 2、value 表示传进来的值
var val = value ? value : 1 // 3、value 存在吗?如果存在,value 就是 value,如果不存在,value 就默认是 1
this.count += val
}
}
})
上面代码中,"加10" 按钮是正常的,但是 "加1" 按钮却不正常。如下图:
先点 "加10" 按钮,数字加了 10;再点 "加1" 按钮,就出现上图中的效果。
那这是为什么呢?是因为 "加1" 按钮那里的 add 没传参数吗?如图:
可是不是说如果有 value 就用 value,没有 value 就默认是 1 吗?那我没传参数,就应该是加 1 啊?
再来看一遍页面渲染的那个图:
请注意图中的 [object MouseEvent] ,这表示当点击 "加1" 按钮时,传进来的其实是一个原生事件对象,而并不是没有传值。
那为什么会传一个事件对象进去呢?
那是因为 "加1" 的 add 没有加括号,注意 add 方法是写在 methods 中,而不是 computed 中。所以当调用 add 方法时,应该加上 (),表示调用该方法。如:
上图中,"加1" 按钮的 add 方法加了圆括号。
此时,如果不给 add 方法传参数,那么默认才会使用 1 。如图:
上图中,先点 "加10" 按钮,正常;再点 "加1" 按钮,正常。
上面讨论的是,methods 中的函数定义了参数,但是调用的时候却没有传参数的情况。
那么猜想一下,如果 methods 中的函数不要求你传参数,调用的时候,是不是就可以不传参数呢?
恭喜你,猜对了。确实是可以不传参数,所以同学们见到没传参数的情况,要淡定~~
总结:
- methods 中的方法,如果要求传入参数,那么调用的时候,最好传入相应的参数,否则可能会造成意想不到的后果;
- methods 中的方法,如果不要求传入参数,那么调用的时候,可以不传参数,直接写函数名即可。
完~~