Loading... <div class="tip inlineBlock info"> 适用场景 </div> #### 任意组件间通信 <div class="tip inlineBlock success"> pubsub的常用API </div> ```javascript import pubsub from 'pubsub-js'; // 消息订阅 const pub_token = pubsub.subscribe('demo', (msgName, data) => { console.log('接收到消息...数据是：', data); }) // 说明： // 1. pub_token为返回值，用于销毁订阅（取消订阅）。 // 2. 'demo'为订阅名称，发布订阅的名称要与此一致，否则无法接收到消息。且订阅名称唯一。 // 3. 回调接收两个参数，一个是msgName，是订阅名称，也就是这里的'demo', data是发布消息传入的数据 // 4. 回调函数请使用箭头函数，避免this指向问题，普通函数this是undefined // 发布消息（异步） pubsub.publish('demo', '测试消息')； // 说明： // 1. 'demo'为订阅名称 // 2. '测试消息'为发送的数据 // 3. 这个API是异步的 // 发布消息（同步） pubsub.publishSync('demo','测试消息') // 与上面的发布消息没有区别，除了这个是同步的，上面的是异步的 // 销毁订阅（取消订阅） pubsub.unsubscribe(pub_token) // 说明： // 1. 参数为订阅时的返回值 // 销毁（取消）所有订阅 pubsub.clearAllSubscriptions(); // 更多用法请参见项目地址：https://github.com/mroderick/PubSubJS ``` <div class="tip inlineBlock success"> 使用方法 </div> 1. 安装pubsub： `npm i pubsub-js` 2. 引入pubsub：`import pubsub from 'pubsub-js'` 3. 接收数据：A组件想接收数据则在A组件中订阅消息。回调写在A组件中。 ```javascript // A组件（以vue举例） // 方式一，回调写在methods中 methods(){ callback(msgName, data){ console.log('接收到消息...数据是：', data); } } mounted(){ this.pid = pubsub.subscribe('demo', this.callback) } // 方式二，使用箭头函数 mounted(){ this.pid = pubsub.subscribe('demo', (msgName, data) => { console.log('接收到消息...数据是：', data); }) } ``` 4. 发布数据：`pubsub.publish('demo', '测试消息')；` 5. 在beforeDestroy钩子中取消订阅：`pubsub.unsubscribe(this.pid)` 最后修改：2022 年 04 月 10 日 © 允许规范转载 赞 0 More haste, Less speed.