Methods Option 方法选项（20）

一、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>