Vue组件通信:任意组件之间进行通信

之前一篇博客，我们介绍了子组件向父组件通信的方法，可以参考博客：

深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏_czjl6886的博客-CSDN博客

今天，我们来讲一讲，任意组件之间的通信方法，主要有全局事件总线、消息订阅与发布、vuex和缓存，vuex和缓存在实际开发中不经常使用，因此就只讲前面2种方式。

方法一：全局事件总线

第一步：安装全局事件总线：

第二步：使用全局事件总线

方法二：消息订阅与发布

1.安装 pubsub：npm i pubsub-js

2.引入：import pubsub from 'pubsub-js'

3.接收与发送数据

公共事件总线、消息订阅与发布的区别：

方法一：全局事件总线

全局事件总线，是程序员们，在开发过程中，对现有东西和经验的总结与整合，不是一个新的API或其他新的东西。

第一步：安装全局事件总线：

在 main.js 文件中，添加代码：

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 安装全局事件总线beforeCreate(){Vue.prototype.$bus = this}}).$mount('#app')

即：第 9-11 行代码，含义是向 Vue 的原型上添加一个全局属性 $bus ，这个全局属性的名字是自定义的，可以命名为 zongxian、abc 等等，但是一般我们都是定义为 bus ，或者 $bus ，我这里定义为 $bus ，每个 vue 实例中，就会有这个 $bus 属性。

如下图：

因为 bus 有 计算机系统的总线 的含义，所以我们就常用这个来命名。

第二步：使用全局事件总线

案例： Brother1 组件与 Brother2 组件进行通信，点击 Brother2 组件的按钮，将 Brother2 组件的姓名传给 Brother1 组件

Brother1 组件接收Brother2 组件中的数据，则在Brother1 组件中给 $bus 绑定自定义事件，事件的回调函数在 Brother1 组件中定义。

Brother1 组件接收数据：

methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}

上述的这种形式是：在methods中定义一个demo函数，在挂载的过程中，将一个自定义事件XXX，与demo函数绑定，然后挂载完毕执行函数demo，即：组件一挂载完就去监听该事件。

事件名字和函数名字都可以随意命名。

<template><div class="outer"><h2>我是Brother1组件</h2><h3>姓名：{{name1}}</h3><!-- <button>点我将Brother1的姓名传给Brother2</button> --></div>
</template><script>
export default {name:'Brother1',data(){return{name1:"小李"}},methods: {demo(data){console.log('我是Brother1组件，我收到了Brother2组件的name：',data);}},mounted() {this.$bus.$on('helloName',this.demo)},
}
</script><style scoped>
.outer{width: 400px;height: 400px;background-color: lightblue;margin-left: 30px;margin-top: 50px;float: left;
}
</style>

上述形式可以简写为下面：将定义回调函数，直接与自定义事件绑定在一起

注意：回调函数要写成箭头函数的形式

mounted() {
this.$bus.$on('xxxx',回调函数)
}

<template><div class="outer"><h2>我是Brother1组件</h2><h3>姓名：{{name1}}</h3><!-- <button>点我将Brother1的姓名传给Brother2</button> --></div>
</template><script>
export default {name:'Brother1',data(){return{name1:"小李"}},// methods: {//   demo(data){//     console.log('我是Brother1组件，我收到了Brother2组件的name：',data);//   }// },mounted() {this.$bus.$on('helloName',(data) => {console.log('我是Brother1组件，我收到了Brother2组件的name：',data);})},
}
</script><style scoped>
.outer{width: 400px;height: 400px;background-color: lightblue;margin-left: 30px;margin-top: 50px;float: left;
}
</style>

注意事项：最好在beforeDestroy钩子中，用$off解绑当前组件所用到的事件，避免同事写的代码中出现同名事件，导致代码bug

beforeDestroy() {

this.$bus.$off('helloName')

},

Brother2 组件提供数据：

Brother2 组件触发相应事件，将数据传给Brother1 组件

this.$bus.$emit('xxxx',数据)

<template><div class="outer"><h2>我是Brother2组件</h2><h3>姓名：{{name2}}</h3><button @click="sendName">点我将Brother2的姓名传给Brother1</button></div>
</template><script>
export default {name:'Brother2',data(){return{name2:"小王"}},methods: {sendName(){this.$bus.$emit('helloName',this.name2)}},
}
</script><style scoped>
.outer{width: 400px;height: 400px;background-color: pink;margin-left: 30px;margin-top: 50px;float: left;
}
</style>

最后实现的效果如下：

方法二：消息订阅与发布

案例：

Brother1 组件与 Brother2 组件进行通信，点击 Brother2 组件的按钮，将 Brother2 组件的姓名传给 Brother1 组件

使用步骤：

1.安装 pubsub：`npm i pubsub-js`

2.引入：import pubsub from 'pubsub-js'

在 Brother1 组件与 Brother2 组件中引入 pubsub

3.接收与发送数据

Brother1 组件接收数据，则在Brother1 组件中订阅消息，订阅的demo回调函数留在Brother1 组件里面，形式如下：

methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

<template><div class="outer"><h2>我是Brother1组件</h2><h3>姓名：{{name1}}</h3></div>
</template><script>
import pubsub from 'pubsub-js'
export default {name:'Brother1',data(){return{name1:"小李"}},methods: {demo(msgName,data){console.log('消息名字是:',msgName);console.log('我是Brother1组件，我收到了Brother2组件的name：',data);}},mounted() {  this.pid = pubsub.subscribe('helloName',this.demo)},
}
</script><style scoped>
.outer{width: 400px;height: 400px;background-color: lightblue;margin-left: 30px;margin-top: 50px;float: left;
}
</style>

上述形式，可以简写为下面形式：注意，回调函数要写成箭头函数的形式

mounted() {
this.pid = pubsub.subscribe('xxx',回调函数) //订阅消息
}

为避免出现错误，最好在 beforeDestroy 钩子中，用 PubSub.unsubscribe(pid)去取消订阅

Brother2 组件提供数据：形式为如下：

注意下面的'xxx'，名字一定要和接收数据的组件中，订阅的消息名一样

pubsub.publish('xxx',数据)

<template><div class="outer"><h2>我是Brother2组件</h2><h3>姓名：{{name2}}</h3><button @click="sendName">点我将Brother2的姓名传给Brother1</button></div>
</template><script>
import pubsub from 'pubsub-js'
export default {name:'Brother2',data(){return{name2:"小王"}},methods: {sendName(){pubsub.publish('helloName',this.name2) //发布消息}},
}
</script><style scoped>
.outer{width: 400px;height: 400px;background-color: pink;margin-left: 30px;margin-top: 50px;float: left;
}
</style>

最终实现的效果如下：

公共事件总线、消息订阅与发布的区别：

注意：非常重要！！！

订阅消息时，箭头函数的参数和公共事件总线的箭头函数参数不一样了，第一个是消息的名称，第二个是消息携带的数据

PS：如果对你有帮助的哈，建议一键三联！，如有疑问，欢迎在评论区留言噢！