一、methods中参数的传递
使用方法和正常的javascript传递参数的方法一样，分为两部：
1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.
2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.
现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>methods Option</title> </head> <body> <h1>methods Option</h1> <hr> <div id="app"> {{ a }} <p><button @click="add(2)">add</button></p> </div> <script type="text/javascript"> var app=new Vue({ el:‘#app‘, data:{ a:1 }, methods:{ add:function(num){ if(num!=‘‘){this.a+=num} else{this.a++} } } }) </script> </body> </html> |
这时，再点击按钮是每次加2个数字。
二、methods中的$event参数
传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。
传递：<button @click=”add(2,$event)”>add</button> 。
我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。
三、native 给组件绑定构造器里的原生事件。
在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。
现在我们把我们的add按钮封装成组件：
声明btn对象：
|
1 2 3 |
var btn={ template:`<button>组件Add</button>` } |
在构造器里声明：
|
1 2 3 |
components:{ "btn":btn } |
用.native修饰器来调用构造器里的add方法
|
1 |
<p><btn @click.native="add(3)"></btn></p> |
四、作用域外部调用构造器里的方法
这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。
|
1 |
<button onclick="app.add(4)" >外部调用构造器里的方法</button> |