is the parent component counter-event-example ? Is the subcomponent button-counter ? counter-event-example is just a div tag, isn"t it? where are the components? v-on is listening? If that"s the case, aren"t you eavesdropping on yourself? I can"t tell which is the parent component and which is the child component. What if I can"t figure out the use of emit?
<div id="counter-event-example">
{{ total }}
<button-counter v-on:increment1="incrementTotal"></button-counter>
<button-counter v-on:increment1="incrementTotal"></button-counter>
</div>
Vue.component("button-counter", {
template: "<button v-on:click="increment">{{ counter }}</button>",
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1 //counter
this.$emit("increment1")//
}
},
})
new Vue({
el: "-sharpcounter-event-example",
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1 //total
}
}
})