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)" 需要通過組件. 方法名的形勢調用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM