<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;
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js