<div id="app">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
Vue.component("counter",{
template: "<div @click='handleClick'>{{number}}</div>",
//子组件定义data时 ,data不能为对象,必须是函数
data: function() {
return {
number: 0
}
},
methods: {
handleClick: function(){
this.number++,
this.$emit('change')
}
}
})
var vm = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleChange: function() {
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})