Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推

以下是一篇关于Vue2.0基于vue-cli+webpack同级组件之间的通信教程的文章，此篇教程由长沙网络推广推荐分享给大家。在深入讨论之前，让我们首先理解什么是同级组件通信。在Vue.js应用程序中，有时我们需要将信息从一个组件传递到另一个组件，即使这两个组件并不直接存在父子关系。这种情况下的通信被称为同级组件通信。接下来，我们将通过创建一个简单的示例来展示如何实现这种通信。

在项目的src/assets目录下创建一个名为EventHandler.js的文件。这个文件的主要目的是作为同级组件之间传递事件的媒介。在Vue中，我们可以使用事件总线模式来实现这一点。通过创建一个新的Vue实例并将其导出，我们可以使用它来触发和监听事件。

然后，我们在Components目录下创建两个同级组件Brother1.vue和Brother2.vue。这两个组件将模拟两个国家Z国和R国的交流场景。在Brother1.vue组件中，我们将创建一个按钮，当点击该按钮时，将触发一个自定义事件myDefineEv，模拟Z国向R国发射原的场景。我们会在组件加载完成后监听一个名为RDefineEv的事件，这个事件将在Brother2.vue组件中定义并发送。

在Brother2.vue组件中，我们会有一个显示消息的字段和一个按钮。当点击按钮时，会触发RDefineEv事件，模拟岛国采用高科技反原系统的场景。我们也会在组件加载完成后监听myDefineEv事件，更新显示的消息字段。

下面是具体的代码实现：

Brother1.vue组件代码：

```html

```

Brother2.vue组件代码：

```html