Vue2.0组件之间通讯

Vue中组件这个特性让很多前端er很是喜欢，我本身也是其中之一，它让前端的组件式开发更加合理和简单。笔者以前有写过一篇Vue2.0子父组件通讯，此次咱们就来聊一聊平级组件之间的通讯。

---

首先咱们先搭好开发环境，咱们先得装好git和npm这两个工具(若是有不清楚的同窗请自行百度哦)

环境搭建步骤：

• 打开git ，运行 npm install --global vue-cli 这是安装vue的命令行
• vue init webpack vue-demo 这是vue基于webpack的模板项目
• cd vue-demo 进入vue-demo文件夹
• npm install 安装package.json中依赖的node_modules
• npm run dev 运行该项目

在Vue2.0子父组件通讯这篇文章聊到过不管是父向子传值仍是子向父传值，都须要一个中间介质。对于平级组件来讲其实也同样，他们也须要一个中间介质来做为一个中央事件总线,咱们了解到这个以后就开始来写个Demo吧。

咱们在git上运行 npm run dev 的命令后，浏览器中会打开一个vue基于webpack构建工具的一个模板项目，接着咱们在编辑器中进入Demo，咱们能够删除掉模板项目中src/components/Hello.vue,而后在App.vue中删除对于Hello子组件的注册和使用还有一些其余可有可无的东西，此时的App.vue应为这样

 

App.png

一 .咱们先来建立中央事件总线，在src/assets/下建立一个eventBus.js,内容以下

 

eventBus.png

eventBus中咱们只建立了一个新的Vue实例，之后它就承担起了组件之间通讯的桥梁了，也就是中央事件总线。

二 . 建立一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

 

firstChild.png

咱们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数
PS:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

三 . 咱们再建立一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

 

secondChild.png

咱们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数
PS:
mounted:是一个Vue生命周期中的钩子函数，简单点说就相似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。
$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件能够由$emit触发，回调函数会接收全部传入事件触发函数($emit)的额外参数。

四 . 在父组件中，注册这两个组件，并添加这两个组件的标签

 

App2.png

保存全部修改的文件，而后打开浏览器窗口，内容以下(css请自行处理)

 

browser.png

点击向组件传值按钮，咱们能够看到传值成功

 

browser2.png

---

总结：

• 建立一个事件总线，例如demo中的eventBus，用它做为通讯桥梁
• 在须要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
• 在须要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

** 题外话：**
1.看过笔者上一篇Vue2.0子父组件通讯这篇文章的同窗能够感受到，组件以前的通讯其实和子组件向父组件传值有些相似，其实他们的通讯原理都是相同的，例如子向父传值也是$emit和$on的形式，只是没有eventBus，但若咱们仔细想一想，此时父组件其实就充当了bus这个事件总线的角色。
2.这种用一个Vue实例来做为中央事件总线来管理组件通讯的方法只适用于通讯需求简单一点的项目，对于更复杂的状况，Vue也有提供更复杂的状态管理模式Vuex来进行处理

做者：PengL连接：http://www.jianshu.com/p/d946bd7c26f4來源：简书著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。