本文共 1743 字，大约阅读时间需要 5 分钟。

方式一：bus中央总线

利用总线方式可以平级组件进行通信

无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。

第一步：我们先来创建中央事件总线，在src/assets/下创建一个bus.js,内容如下

import Vue from 'vue'export default new Vue();

eventBus.js中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。

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

firstChild.vue

我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数

PS:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

第三步：我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

secondChild.vue

我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数

PS:

mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。

$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

第四步：创建一个parent父组件，在父组件中，注册这两个组件，并添加这两个组件的标签

parent.vue

总结：

• 创建一个事件总线，例如demo中的bus.js，用它作为通信桥梁
• 在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
• 在需要接收的组件生命周期mounted中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

方式二：消息订阅与发布(PubSubJS 库)

pubsub的优点：组件之间的通信没有任何位置的限制

首先安装pubsub-js库

    npm install pubsub-js --sava

pubsub有两个方法：

    PubSub.publish('发布的消息名','提供给订阅者的参数')             //发布消息  ==>触发事件 比如点击事件

举例：PubSub.publish('infomation_1',data)

    PubSub.subscribe('发布的消息名',事件的监听函数)                //订阅消息   ==>绑定事件监听 获取消息

举例：PubSub.subscribe('infomation_1',function(msg,data){

    })

案例：

父组件parent.vue

子组件firstChild.vue ---发布消息

子组件secondChild.vue ---订阅消息

 注意