vue-methods三种调用的形势


    

        var btn = {
            template:`<button>组件add</button>`
        }

       var any = new Vue({
         el: '#app',
         data:{
            a:1
         },
        
        components: {
            btn
        },
        methods:{
            add:function(num){
                if(num != ''){
                    this.a+=num
                }else{
                    this.a++;
                }
            }
        }
         
       })
    

  1. 第一种最简单的--在vue实例中调用
    <div id="app">
       {{ a }}
       <p><button @click="add(2)">add</button></p>        //第一种方式
       <p><btn @click.native="add(2)"></btn></p>       //第二种方式
    </div>
    <button onclick="any.add(2)">add++</button>     //第三种方式

在Vue当前组件中直接调用add @click="add(2)"直接绑定就可以了

在子组件中调用父组件的方法 @click.native="add(2)" 需要调用加上事件修饰符

在vue实例外面,直接以原生的方式调用组件中的方法
onclick="any.add(2)" 需要通过组件. 方法名的形势调用

posted @ 2017-07-29 21:39  老年游侠  阅读(5922)  评论(0编辑  收藏  举报