<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: function () {
return {
number: 0
};
},
methods: {
handleClick: function () {
this.number++;
this.$emit("change");
}
}
});
var app = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleChange: function () {
// console.log('change')
console.log(this.$refs.one.number); // 打印出组件的引用
console.log(this.$refs.two.number); // 打印出组件的引用
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
});
This Pen doesn't use any external CSS resources.