Vue3 全局事件总线 Vue.prototype.$bus = this , $on $emit $off 绑定与使用

原因：

        由于Vue3中的mian.js文件中，已经不提供Vue2的挂载方式，  Vue.prototype.$bus = this 

        Vue2:

new Vue({
  el:'#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  }
})

        Vue3：

createApp(App).mount('#app')

       

解决：

        需要使用第三方库  EventBus

        

安装

$ npm install --save vue3-eventbus
   

挂载

import eventBus from 'vue3-eventbus'
    app.use(eventBus)
   

使用

// Button.vue
import bus from 'vue3-eventbus'
export default {
    setup() {
        bus.emit('foo', { a: 'b' })
    }
}

引入后：

       main.js中使用 use() 方法

import eventBus from 'vue3-eventbus'


createApp(App).use(eventBus).mount('#app')

        其它文件引入后,，

                使用  bus.on()  替代  原本  this.$bus.$on()  写法

                以此类推   bus.emit()、 bus.off()、 bus.on()

        

import bus from 'vue3-eventbus'

mounted(){

    //Vue2
    this.$bus.$on()
    

   //现在
   bus.on()

}