console
Vue.component("button-counter", {
name: 'child',
template: '<button v-on:click="add">{{ counter }}</button>',
props: {
counter:{
type:Number,
default:0,
}
},
data () {
return {
newCounter: 0
}
},
methods: {
add () {
this.newCounter = this.counter + 1;
console.log('oldCounter:'+this.counter)
console.log('newCounter:'+this.counter)
this.$emit('add1', this.newCounter)
}
}
})
new Vue({
el: "#app",
data () {
return {
counter: 0
}
},
methods: {
incrementTotal: function (e) {
e = this.counter
console.log('father:'+this.counter)
}
}
})
<div id="app">
{{ counter }}
<button-counter :counter="counter" @add1="incrementTotal"></button-counter>
<button-counter :counter="counter" v-on:add1="incrementTotal"></button-counter>
</div>