[JavaScript知识库]VUE中通过EventBus在同级组件中通信 含可以直接复制替换使用的案例

EventBus
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

使用

• 首先创建evebtBus.js文件

import vue from 'vue';
export default new vue();

• 在分发事件和接收事件的组件中分别引入eventBus

import Bus from './eventBus';
export default {
    components: {
        MeetingCreateDialog,
        Bus
    },
    ...
}

• 分发事件

Bus.$emit('eventname',this.$route.path);

• 接收事件分发 写在mounted中

    mounted (){
      Bus.$on('eventname',(url)=>{   
        if(url === '/index/DataShow'){
            this.getListDataBefore();
        }
      });
    },

• 移除事件监听
  若不进行移除会造成重复调用等诸多问题

	EventBus.$off('eventname')

也可以使用VueX进行监听达到同样的事件分发效果

    watch: {  
    	//在其他组件中 通过commit触发store改变 在接收事件的组件中  通过监听store实现事件分发
        '$store.state.refresh': function () {
            if(!this.$route.path === '/index/DataShow'&&refresh){
                return;
            }
            this.getListDataBefore();
        },
   }

总结

实际开发中 肯定是vuex很好用方便 不容易出问题。但考虑到使用vuex所带来的项目体积增加等情况下，也可以使用evebtBus，但要注意移除事件监听。
大概感觉就象是 一个是临时方案凑合用 一个是一劳永逸的工具