<div id="app">
<counter :count="2" @change="handleChange"></counter>
<counter :count="6" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
var counter = {
props: ['count'],
//子组件不能对父组件传过来的值进行修改
data: function() {
return {
//所以这里使用一个参数来存放父组件传过来的值
number: this.count
}
},
template: "<div @click='handleClick'>{{number}}</div>",
methods: {
handleClick: function(){
this.number = this.number + 2,
this.$emit('change',2)//$emit(),可以接收一个参数
}
}
}
var vm = new Vue({
el: "#app",
data: {
total: 8
},
components: {
counter: counter
},
methods: {
handleChange: function(step) {
this.total += step
}
}
})