1、定义空组件(非父子组件通信的前提)

let bus = new Vue({})

2、在组件1中 用$emit自定义事件addnum

bus.$emit(‘addnum’,this.num);
将组件1中的数据传到空组件bus中，并且封装到add函数中，this.num是需要传输的数据

Vue.component('myBtn', {
  template: '#mybtn',
  data() {
    return {
      num: 10
    }
  },
  methods: {
    add() {
      // 2、自定义事件
      bus.$emit('addnum', this.num);
    }
  }
})

3、在组件2中，用$on来从bus中取得数据，并调用自定义addnum事件

Vue.component('myCount', {
  template: '#mycount',
  data() {
    return {
      number: 0
    }
  },
  mounted() {
    let self =
      this;
    // 调用自定义addnum事件 
    bus.$on('addnum', function (result) {
      console.log(result);
      self.number = self.number + result
      console.log(self.number);
    })
  }
})

注意这里的this必须赋值给一个变量，不然无法传到函数中去

4、在组件1的视图层调用add函数

<template id="mybtn">
  <div>
    <p>我是mybtn组件</p>
    <p> <button @click="add">click count</button> </p>
  </div>
</template>

代码演示：