eventBus的原理

Vue中的EventBus是一种事件总线，用于在组件之间进行通信。它的原理是通过创建一个全局的Vue实例作为中央事件总线，其他组件可以通过该实例来订阅和发布事件。

具体步骤如下：

1. 创建一个全局的Vue实例，作为事件总线：const eventBus = new Vue();
2. 在需要订阅事件的组件中，通过eventBus.$on(eventName, callback)方法来订阅事件。其中，eventName是事件的名称，callback是事件触发时执行的回调函数。
3. 在触发事件的组件中，通过eventBus.$emit(eventName, payload)方法来发布事件。其中，eventName是事件的名称，payload是传递给订阅者的数据。
4. 在订阅事件的组件中，当事件被触发时，订阅者会执行相应的回调函数进行处理。

这种机制可以实现不同组件之间的解耦，使得组件之间可以方便地进行通信和数据传递。但同时也需要注意避免滥用EventBus，因为过多的全局事件会导致代码维护和调试困难

EventBus的使用

1.创建一个全局的Vue实例，作为事件总线：const eventBus = new Vue();

import Vue from 'vue'
//向外部共享Vue实例
exprt default new Vue()

//enentBus.js

2.在传递数据的组件中通过eventBus.$emit方法来发布事件

import bus from './eventBus.js'
export default {
    data(){
      return {
            msg:'hello world'
        }
    },
    methods:{
        sendData():{
            bus.$emit('shareData',this.msg)
    
    }
}

3.在接收数据组件中通过eventBus.$on(eventName, callback)方法来订阅事件

import bus from './eventBus.js'
export default{
    data(){
        return{
        dmsg:''
        }
    },
    created(){
        bus.$on('shareData',(val)=>{
           this.dmsg=val
    
    })
    }

}