Vue自定义组件事件传递：EventBus部分

前言

组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。 而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式：EventBus和利用Vuex框架进行状态管理。

我会通过两种不同的交互方式，它们对于父子组件间数据交互和兄弟组件间数据交互。

由于篇幅关系，本文主要介绍EventBus进行数据消息传递；关于运用Vuex框架进行状态管理在下一篇文章中介绍。

Vuex框架介绍：Vuex入门教程

案例介绍

本章节会有大量的代码示例，为了让读者阅读轻松，做如下目录和组件介绍。本章节主要运用了两个子组件和一个父组件。

子组件文件名：SearchInput.vue和SearchItem.vue

父组件文件名：StateView.vue

目录结构展示：

1、SearchInput.vue

组件介绍：一个输入框，它会onInput方法去监听输入内容，并调用方法，将输入框内的数据传递出去。

代码展示：

复制代码

SearchItem.vue

组件介绍：一个span，它主要用来接收父组件传递的内容和接收同胞组件输入框传递的内容，并进行展示。

代码示例：

复制代码

StateView.vue

组件介绍：父组件，主要展示页面和加载子组件

代码示例：

复制代码

正文

EventBus

1、父组件发送数据给子组件，可以通过子组件定义的props自定义属性，去传递数据

2、EventBus其实就是通过实例化一个Vue实例，然后通过该实例的$emit方法发送数据消息和$on方法接收数据消息。它适用在子组件发送消息给父组件或子组件发送消息给兄弟组件。

我们看下一个下面案例主要展示了：

1、通过props父组件(StateView)去为子组件（SearchItem）传递数据；

2、子组件(SearchInput)通过EventBus和父组件(StateView)、兄弟组件(SearchItem)传递数据；

目录结构展示

效果展示

代码展示：（粗体表示变化部分）

1、第一步：自定义一个EventBus（SearchEvent.js）

import Vue from 'vue'
export default new Vue()
复制代码

在这里我们new了一个Vue的实例，并将它输出。

第二步：子组件通过EventBus发送数据消息

复制代码

在上面的示例我们主要做了以下事情： 1、导入EventBus

2、通过@input="sendEvent"去监听onInput事件，并发现输入框内内容有改变时，回调sendEvent方法，调用EventBus.emit()方法把数据消息发送出去

第三步父组件(StateView)和子组件(SearchItem)接收数据消息

StateView.vue

复制代码

在上面的示例我们主要做了以下事情：

1、在父组件，我们通过SearchItem的props去传递了数据。

2、通过在组件mounted生命周期中调用EventBus.on()方法去接收子组件（SearchInput）的数据消息，并对content进行修改值

SearchItem.vue

复制代码

在上面的示例我们主要做了一事情：

通过在组件mounted生命周期中调用EventBus.on()方法去接收子组件（SearchInput）的数据消息，并对content进行修改值。

我们可以感受到SearchInput一发送数据消息，所有注册接收search事件的地方都会接收到数据消息

复盘：

1、父组件给子组件进行数据传递可以通过props进行传递。

2、子组件给父组件进行消息传递或子组件给兄弟组件进行消息传递可以通过EventBus去实例化一个Vue，并通过该实例的$emit和$on方法去传递和接收数据消息。

3、数据消息一旦发送，所有注册了接收该数据消息的地方都会接收到该数据消息。

我的大麦，如果喜欢我的文章请给我一个小心心哦。