核心思想：使用一个新的vue实例及其$on和$emit方法触发事件
第一步，给vue原型增加一个新的vue对象

Vue.prototype.$eventBus = new Vue()

第二步：在需要向外传递时使用$emit

<template>
  <div class="son">
    <h1>这是son组件</h1>
    <button @click="vueBus">使用$bus进行通信</button>
  </div>
</template>

<script>
  export default {
    name: "Son",
    data(){
      return {
        sonData:1
      }
    },

    methods: {
      vueBus(){
        this.$eventBus('bus',this.sonData)
      }
    }
  }
</script>

<style scoped>
  .son {
    background-color: darkgray;
    color: white;
  }
</style>

第三步：在监听需要这个事件的组件的mounted函数内，使用$on监听事件

<template>
  <div class="son">
    <h1>这是son2组件</h1>
  </div>
</template>

<script>
  export default {
    name: "Son",
    mounted(){
      this.$eventBus.$on('bus',value=>console.log(value))
    },
  }
</script>

<style scoped>
  .son {
    background-color: darkgray;
    color: white;
  }
</style>

注意：如果某些事件挂载时就触发需要注意vue生命周期（父created-子created-子mounted-父mounted）。如果需要在子组件mounted时emit事件，并且触发父组件里的on，此时是无法实现的，因为父组件还没有执行$on，就需要子组件中使用$nextTick，在$nextTick中触发emit