注册登录

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

我们知道Vue组件间通信方式有多种，我们可以让父子组件间通信变得很简单，也可以让兄弟组件间通信变得容易。本文我们主要介绍兄弟组件间的通信方式：eventBus。

查看演示 下载源码

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

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

1. 初始化

首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它。

我们在src/components/目录下新建文件bus.js。

import Vue from 'vue'
export default new Vue()
知识兔

2. 发送事件

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

ComA这样：

<template>
    <div>
        <button @click="sendMsg">给组件B发送消息</button>  
    </div>
</template>

<script>
import bus from './bus'

export default {
    name: 'comA',
    data () {
        return {
            
        }
    },
    
    methods: {
        sendMsg() {
            bus.$emit('fromA', {
                phone: 13800138000
            })
        }
    }
}
</script>
知识兔

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

3. 接收事件

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

<template>
    <div>
        <p>{{fromA}}</p>
    </div>
</template>

<script>
import bus from './bus'

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

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

父组件

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

<template>
  <div>
    <comA></comA>
    <comB></comB>
  </div>
</template>

<script>
import ComA from './ComA.vue'
import ComB from './ComB.vue'

export default {
    components: {
       ComA,
       ComB
    },
}
</script>
知识兔

更多效果请看demo演示。

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

计算机