消息订阅与发布(pubsub-js)

45 阅读1分钟

一、一种组件间通信的方式,适用于任意组件间通信。

二、使用步骤:

1、安装pubsub:npm i pubsub-js

2、引入:import pubsub from "pubsub-js"

3、接收数据:A组件想接受数据,则在A组件中订阅消息,订阅的回调留在A组件自身。

methods:{
    demo(msgName,data){
        console.log('有人发布了hello消息,hello消息的回调执行了',msgName,data)
    }
},
mounted(){
    this.pid = pubsub.subscribe('hello',this.demo) //订阅消息
},

//最好在beforeDestroy钩子中,用pubsub.unsubscribe(pid)
beforeDestroy(){
    pubsub.unsubscribe(this.pid)  
}

4、提供数据:

 <button @click="sendStudentName">点击发送数据给A组件</button> 
 methods:{ 
     sendStudentName(){ 
        pubsub.public('hello',数据)
     } 
 }
 ```