为什么不直接用vue原型上的$on，而是要再在vue原型对象里加一个vue实例作为$bus

Question

直接用vue原型对象上的$on,$emit，组件实例也可以拿到vue原型对象里的$on,$emit ,为什么不直接用，为什么还要安装$bus

Answer 1

• 你看下这篇博客吧, 应该有用👉 ：vue 组件传值（二）$bus，$emit，$on
• 以下回答由chatgpt基于相关博客总结生成:

  在Vue中使用$bus进行事件传递的主要原因是方便组件之间的通信，尤其是在兄弟组件之间传递数据。尽管组件实例也可以访问原型对象上的$on和$emit方法，但是使用$bus可以更加方便的进行事件传递。

  具体实现步骤：

  1.安装全局事件总线，在main.js中引入Vue并安装VueRouter后，在Vue实例中加入beforeCreate钩子函数，将实例挂载在Vue.prototype.$bus上

  import Vue from 'vue'
  import App from './App'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
  Vue.config.productionTip = false
  
  new Vue({
      el:'#app',
      render:h=>h(App),
      beforeCreate () {
          Vue.prototype.$bus = this
      }
  })
  

  2.在发送方使用$bus.$emit(‘自定义事件名’，传递的值)来触发事件

  this.$bus.$emit('custom-event', data)
  

  3.在接收方通过$bus.$on来监听事件，从而进行数据的接收和处理

  this.$bus.$on('custom-event', data => {
      //处理数据
  })
  

  需要注意的是，在使用$bus进行事件传递时，需要保证监听事件先被创建，否则无法正常监听消息。同时，如果路由跳转多个组件重复监听可以在beforeDestroy钩子函数中移除监听，避免监听事件冲突。

  如果遇到$on无法获取数据的问题，需要检查监听事件是否在emit之前被创建，并且需要注意组件实例的挂载和取消监听时机是否正确。

  使用$bus进行事件传递需要注意代码的规范性和可维护性，避免产生不必要的bug。