vue组件通信方式之兄弟组件通信eventBus

eventBus单独的事件中心,用来管理组件之间的通信。

由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。
然后在组件中，可以使用$emit, $on, $off 分别来分发、监听、取消监听事件。

需求：点击左侧联系人，改变右侧聊天记录框头部联系人信息，并获取对应的聊天记录。
左侧联系人列表left.vue和右侧聊天记录框right.vue系兄弟组件。

1.在utils文件夹里创建一个bus.js文件，里面写上如下代码：

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

2.引入utils中的bus文件import eventBus from '@/utils/bus'。
在left.vue中将需要分发的数据item命名为chatterData，通过eventBus.$emit('chatterData', item)方式分发。

methods: {
    selectCustomer(index, item) {
      eventBus.$emit('chatterData', item)
    }
}

3.引入utils中的bus文件import eventBus from '@/utils/bus'。
在right.vue中通过eventBus.$on('chatterData', (val) => {})方式进行接收。

created(){
    eventBus.$on('chatterData', (val) => {
      this.customerInfo = val
      this.listParams.externalUserid = val.externalUserid
    })
}