一、安装插件

1、打开小黑窗，cd到项目文件夹下，输入下面的代码

npm install vue-bus

二、引入插件

1、在main.js中引入并使用

import VueBus from 'vue-bus';
Vue.use(VueBus);

三、组件间通信

1、在其中的一个组件添加button按钮，并绑定click事件，事件触发Vue-Bus发送信息，代码如下

第一个参数是发送与接收的信号，要保持一致，第二个参数是发送的内容。

this.$bus.emit('sendMsg', '踢球的rapper超酷');

 2、在另一个组件里面接收信息。首先在组件的created周期开始监听信号，在beforeDestroy周期关闭监听信号，代码如下

第一个参数要和发送信号的组件保持一致，这样才可以接收到信息，第二个参数是触发的方法。

created() {
  this.$bus.on('sendMsg', this.showMsg);
},
beforeDestroy() {
  this.$bus.off('sendMsg', this.showMsg);
}

接收到的信息已经包括了前面提到的“踢球的rapper超酷”，因此，在编写showMsg方法的时候需要设一个形参来接收信息，然后赋值给当前组件的msg，最后展示在界面上，具体如下图

 四、实现效果

1、首先打开接收信息的组件，原因是需要初始化监听信号，也就是created周期里的监听，然后再点击按钮发送信息，如果显示了“踢球的rapper超酷”，说明成功啦！具体如下图所示