<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods:{
incrementCounter:function(){
this.counter+=1
this.$emit('increment')
}
}
})
new Vue({
el: "#counter-event-example",
data:{
total:0
},
methods:{
incrementTotal:function(){
this.total+=1
}
}
})
</script>