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

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

  • 你看下这篇博客吧, 应该有用👉 :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。