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)的额外参数。