[vue3] 消息的订阅与发布

 消息的订阅与发布

组件间通信：消息的订阅与发布（PubSub.js）组件间的一种通信方式，适用于任何组件间通信。

使用PubSub可以在Vue任意组件间vue进行传值，无需要进行中间层层传递。

使用的模式是观察者模式,生产者抛出,消费者接收

 安装

npm install --save pubsub-js

注意在导包时可能因为版本问题出现红色波浪线, 不用管正常运行即可 

原因:

• 使用 npm install pubsub-js --save 命令下载的是1.7.0的最新版本，不支持
• 使用 npm install [email protected] --save 命令下载的是1.6.0的版本。
• 1.6.0版本支持发布(publish)和订阅(subscribe)函数

 消息的发布

模拟子组件向父组件发送消息,子组件作为生产者生产data

语法：PubSub.publish('主题', data)

新建views/poduct/Add.vue

添加路由

 Add.vue

 消息订阅

父组件作为消费者接收data

语法：PubSub.subscribe('主题', function(msg, data){

})

取消订阅

 效果图