Vue组件间通信：兄弟组件间通信

eventBus
又称为事件总线，在vue中可以使用它来作为沟通桥梁, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所有组件都可以通知其他组件。

那么，在Vue的项目中怎么使用 eventBus
来实现组件之间的数据通信呢?具体通过下面几个步骤:

1. 初始化

首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它。
我们在src/components/目录下新建文件bus.js。

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

2. 发送事件

假设你有两个兄弟组件: ComA和ComB，ComA发送消息给ComB。
ComA这样：

    

        给组件B发送消息  
    



import bus from './bus'

export default {
    name: 'comA',
    data () {
        return {
            
        }
    },
    
    methods: {
        sendMsg() {
            bus.$emit('fromA', {
                phone: 13800138000
            })
        }
    }
}

很显然，ComA中使用 bus.$emit(事件名,数据);
向事件中心注册发送事件。

3. 接收事件

ComB接受ComA发送过来的消息。

    

        {{fromA}}
    



import bus from './bus'

export default {
    name: 'comB',
    data () {
        return {
            fromA: '',
        }
    },
    mounted() {
        bus.$on('fromA', param => {
            this.fromA = param.phone;
        })
    }
}

于是，当ComA发送了一个手机号码phone给ComB时，comB就会接收并显示。

父组件

在父组件中调用ComA和ComB两个兄弟组件。

  

    
    
  



import ComA from './ComA.vue'
import ComB from './ComB.vue'

export default {
    components: {
       ComA,
       ComB
    },
}

更多效果请看demo演示。
注意，eventBus也有不方便之处, 当项目较大，维护起来就相当困难，这时我们应该用到Vuex状态管理来解决。本站后面有文章给大家讲解vuex组件状态管理。