用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法

Posted 2020-09-21 千と千寻の

html

<div id="app">
      <span v-text="number"></span>
      <btn @click.native="add(10,$event)"></btn>
      <button @click="add(10,$event)">add</button>
</div>
<button onclick="vm.add(10)">外部用原生js调用</button>

js

var btn = {
        template:`<button>外部组件条用构造器内部方法</button>`
    }
        var vm = new Vue({
            el:"#app",
            data:{
                number:1
            },
            methods:{
                // 记得return 出来啊
                add:function(num,event){
                    if(num!=""){
                       this.number+=num;
                    }else{
                        this.number++;
                    }
                    // 点击的很多属性都在里面
                    console.log(event);
                }
            },
            components:{
                "btn":btn
            }
        })