react中同级组件传值（PubSubjs使用说明）

PubSubJS 是一个基于主题的发布/订阅库，以 JavaScript 书写。

安装

通过命名行 npm i pubsub-js

示例

基本示例

// 创建一个函数来订阅主题,接收参数和进行下一步操作
var mySubscriber = function (msg, data) {
    console.log( msg, data );// msg主题名，data参数
};

// 订阅主题，并绑定事件，返回一个token，用于后续注销订阅，跟定时器类似
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

// 异步发布主题
PubSub.publish('MY TOPIC', 'hello world!');

// 同步发布主题，这在某些环境中更快，
// 但当一个主题触发新的主题时，就会触发未知问题
PubSub.publishSync('MY TOPIC', 'hello world!');

取消特定订阅

// 创建一个函数来订阅主题,接收参数和进行下一步操作
var mySubscriber = function (msg, data) {
    console.log(msg, data);
};

// 订阅主题，并绑定事件，返回一个token，用于后续注销订阅，跟定时器类似
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

// 取消订阅
PubSub.unsubscribe(token);

取消所有功能订阅

// create a function to receive the topic
var mySubscriber = function(msg, data) {
    console.log(msg, data);
};

// unsubscribe mySubscriber from ALL topics
PubSub.unsubscribe(mySubscriber);

清除主题的所有订阅

PubSub.subscribe('a', myFunc1);
PubSub.subscribe('a.b', myFunc2);
PubSub.subscribe('a.b.c', myFunc3);

PubSub.unsubscribe('a.b');
// 会注销 'a.b' 和'a.b.c' 的通知
// 但 'a' 依然存在

清除所有订阅

PubSub.clearAllSubscriptions();
// 删除所有订阅

获取订阅

PubSub.getSubscriptions('token');
// 通过令牌从所有主题订阅

计数订阅

PubSub.countSubscriptions('token');
// 从所有主题计数标记

错误处理

// isPublished是一个布尔值，表示是否为该主题注册了任何订阅者
var isPublished = PubSub.publish('a');

// 如果出现错误，订阅者没有注册，令牌将为假
var token = PubSub.subscribe('MY TOPIC', mySubscriber); 

分层地址

// 创建订阅者以从主题层次结构接收所有主题
var myToplevelSubscriber = function (msg, data) {
    console.log('top level: ', msg, data);
}

// 订阅“car”层次结构中的所有主题
PubSub.subscribe('car', myToplevelSubscriber);

// 创建订阅者以仅从层次结构op主题接收叶主题
var mySpecificSubscriber = function (msg, data) {
    console.log('specific: ', msg, data);
}

// ：只订购“car.drive”的话题
PubSub.subscribe('car.drive', mySpecificSubscriber);

// 发布一些话题
PubSub.publish('car.purchase', {name: 'my new car'});
PubSub.publish('car.drive', {speed: '14'});
PubSub.publish('car.sell', {newOwner: 'someone else'});
// 在这个场景中，将对所有主题调用myToplevelsubscriber，共三次
// 但是，mySpecificsubscriber将只被调用一次，因为它只订阅“car.drive”的话题

使用

1. 导入模块

    import PubSub from 'pubsub-js'
   

2. 先在需要的地方进行订阅

    PubSub.subscribe('delete', function(第一个参数,不用可以写成’_’,data){ }); 
    //订阅  如果需要取消写成this.token = PubSub.subscribe
   

3. 发布订阅

    PubSub.publish('delete', data) //发布消息
   

4. 销毁订阅

    在生命周期componentWillUnmount(){}中使用PubSub.unsubscribe(订阅消息的名字,比如:this.token)