一、methods传值
和原生的javascript传递参数的方法一样
1、先在methods的方法中进行声明调用的函数
2、调用方法时直接传递
如:
<button @click="add(2)">add</button>
methods:{
add:function(num){
if(num!=''){
this.number+=num;
}else{
this.number++;
}
}
}
二、$event和原生的一样
传递的$event参数都是关于你点击鼠标的一些事件和属性。把event打印出来如下,
image.png
三、组件调用构造器里面的方法
在实际开发中经常需要把某个按钮封装成组件,然后反复使用,如何让组件调用构造器里的方法,而不是组件里的方法。就需要用到我们的.native修饰器了。
<div id="app">
<h1>{{number}}</h1>
<button @click="add(2,$event)">add</button>
<p><btn @click.native="add(2)"></btn></p>
</div>
<button onclick="app.add(0)">外部add</button>
<script>
var btn={
template: `<button>add组件</button>`
}
var app=new Vue({
el:"#app",
data:{
number:1
},
components:{
'btn':btn
},
methods:{
add:function(num, event){
if(num!=''){
this.number+=num;
}else{
this.number++;
}
console.log(event)
}
}
});
四、在作用域外面使用原始方法
在作用域外部调用构造器里的方法,这种不常用
<button onclick="app.add(0)">外部add</button>