vue自定义事件@emit
<body> <div id="app"> <my_btn @changecount="total()"></my_btn>监听@changecount事件，发现有调用。就触发total()方法； <my_btn @changecount="total()"></my_btn> <my_btn @changecount="total()"></my_btn> <my_btn @changecount="total()"></my_btn> <my_btn @changecount="total()"></my_btn> <my_btn @changecount="total()"></my_btn> <p>一共点击了{{allCount}}次</p> </div> <template id="btn"> <button @click="changecount()">点击次数{{count}}</button> </template> <script src="js/vue.js"></script> <script type="text/javascript"> Vue.component("my_btn",{ template:"#btn", data(){ return { count:0 } }, methods:{ changecount(){ this.count += 1 ; this.$emit('changecount');//监听响应器 } } });
new Vue({ el:"#app", data:{ allCount:0 }, methods:{ total(){ this.allCount += 1 ; } } }); </script> </body> |
