Vue组件通信中使用eventBus

使用场景

主要是现实途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

简单的例字

比如，我们这里有三个组件，index.vue、message-general.vue、chat-editor.vue。message-general和chat-editor是父组件main下的兄弟组件。这里要实现，message-general组件中触发点击事件后，调用chat-editor组件的方法。

首先，我们给message-general.vue组件添加点击事件:

<span @click="atPerson(user)"></span>

想要在atPerson()方法中，实现对chat-editor组件的通信，我们需要新建一个js文件，来创建出我们的eventBus，我们把它命名为eventBus.js

import Vue from 'vue';
const eventBus = new Vue();
export { eventBus };

这样我们就创建了一个新的vue实例。接下来我们在message-general组件和chat-editor组件中import它。

import { eventBus } from '@/utils/eventBus';

接下来，我们在atPerson方法中，来触发一个事件：

methods: {
	atPerson(user) {
      eventBus.$emit('atPerson', user);
    }
}

这里我们在message-general组件中每次点击，都会在eventBus中触发这个名为’atPerson’的事件，并将点击事件的user参数顺着事件传递出去。

接着，我们要在chat-editor组件中的mounted中调用eventBus监听这个事件，并接收参数：

mounted() {
	eventBus.$on('atPerson', data=> {
      console.log('接收的参数', data);
    });
}

图片示例

图1:

图2：

图3：

图4：

图5：

图6：