Vue消息的订阅与发布-pubsub-js

436 阅读1分钟
  1. 作用: 适用于任意组件间通信
  2. 使用步骤:
    2.1 安装pubsub: npm i pubsub-js
    2.2 引入: import pubsub from 'pubsub-js'
    2.3 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
     // 订阅消息
     // 使用箭头函数或者函数名 使this指向指向vc原型实例 
     pubsub.subscribe('hello',(funname, data) => {
         // funname为消息名称  data为传递的参数
         console.log(funname, data)
     })
    
    2.4 发布消息,提供数据:
    // 发布消息
    // 参数1为消息名称  消息2是传递的参数
    pubsub.publish('hello', 'Tom')
    
    2.5 最好在beforeDestory钩子中,使用pubsub.unsubScribe('hello')取消订阅