Vue3 _ 20. Vue 多组件沟通 - Pubsub 消息组件

我们之前说了这个父子组件的数据沟通，但是相伴而来的其实还有别的问题，好比我们现在想要三个或者三个以上的组件同时去进行沟通，那么我们这个如何去完成呢？

如果我们还用之前的方式进行沟通，那这个代码量是真的多，所以我们这里可以使用一种组件，叫 pubsub.js

官网地址：https://www.npmjs.com/package/pubsub-js

一、安装

想要使用这个 pubsub.js 我们首先第一步是需要安装它（默认是没有这玩意的），我们直接打开官网，它里面有命令进行安装~

npm install pubsub-js --save

耐心等待一会就好，很快，就十几秒~~

二、Pubsub 介绍

我们首先来看官方给我们最基本的例子

这里来给大家介绍一下，首先我们来说 publish 这个方法，这个是发布消息的意思，第一个参数是 发布的内容名称是什么，第二个就是值。

然后再来说一下 subscribe 这个方法，这个方法是订阅消息，这个订阅同样需要传递参数，第一个参数是要订阅的内容是什么，也就是发布时候的内个名称，第二个是我们要调用的方法

最后再来说方法，方法固定传递两个参数，一个是 msg，一个是 data，msg 就是订阅的内容（也就是发布名称），data 就是我们要从 publish 中的传递的值。

三、项目实战

接下来我们将 pubsub 在我们 App.vue 中引入一下，这里我们要做的是做订阅消息。来看一下代码

接下来是 ChildView.vue

这个子组件，我们是让它来发布消息。

当然，这里弄两个是不够的，我们再来弄一个订阅者。打开 Lemon1234_slot.vue

ok，弄好之后，我们来启动项目。启动后我们点击 button：“点击进行消息传递”

可以看到，我们两个订阅者都做出了回应。

这一篇东西不多，自己动手练习一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~