>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、本节说明 上一节我们通过点击事件监听,实现了计数器的加一和减一的操作。那么如果我们想更灵活一点,实现加n和减n的操作,我们就需要给自定义的函数传参数了。我们这一节就来讲讲,如何给methods里面定义的函数传参。 ## 二、 怎么做 ![](https://img.kancloud.cn/30/8d/308d210fe878682a05a116c993b42787_762x587.png) * 我们定义了数据step,默认值为2,作为参数传递给incr和decr方法 * incr和decr方法接受参数,并分别做加n和减n的操作 * 如果我们想动态的实现加n,减n,就设置`app.step = n` 就可以了 ## 三、 效果 ![](https://img.kancloud.cn/aa/f4/aaf490564249a8e249aefdb4c1c65d0f_264x104.gif) * 每点击一次加号,counter加2;每点击一次减号,counter减2 ## 四、 深入 vue会默认给我们给我们一个参数event,这个参数的使用方法如下: ``` <button v-on:click="decr(step,$event)">-</button> ``` 将event参数放在参数列表的的最后位置。注意:函数没有自定义参数也可以接收event参数。 ``` decr(n,event){ this.counter = this.counter - n console.log(event) } ``` 我们将event参数打印出来,结果如下: * MouseEvent表示一个鼠标的产生的事件 * 下图中可以看出,我们通过事件可以获取,事件产生的屏幕坐标、是否冒泡、事件类型click等信息 ![](https://img.kancloud.cn/0e/c6/0ec62114ec048bd088624e8b2e824c55_686x621.png)