xiaochengxu/node_modules/onfire.js/doc/cross-component-communication-react.md

如何进行跨组件通信

分步骤介绍如何在 React 中使用 onfire.js 事件的方式去进行跨组件通信。

举个场景例子：页面顶部的搜索框（Search）根据下面加载的内容（Content）页面不同，显示不同的默认内容。也就是 Content 组件需要发送数据给 Search 组件。

• 安装

npm i --save onfire.js

• 公共模块创建事件

例如，在整个系统的公共模块中创建一个 onfire 实例，用于数据通信。比如 common.js 中：

import OnFire from 'onfire.js';
// 创建 onFire 事件实例
const onFire = new OnFire();

// 导出，给 Search、Content 组件使用
export default onFire;

• Search 组件中监听事件

我们定义事件名称为：keywordEventName，然后在 Search 组件中监听事件，代码如下：

import onFire from './common.js';

// 组件加载之后，监听事件
function onLoad() {
  onFire.on('keywordEventName', function(keyword) {
    // 设置搜索框默认的搜索关键字
    setDefaultKeyword(keyword);
  });
}

• Content 组件发送数据

import onFire from './common.js';

// 组件加载之后，发送数据
function onLoad() {
  onFire.fire('keywordEventName', 'Content 页面的关键字');
}

完成之后，效果就是，在 Content 组件加载之后，会将 'Content 页面的关键字' 发送到 Search 组件中。切换不同的内容，可以实现发送不同的数据。

---

以上伪代码，并不一定在 React 才能使用，在 Vue、Angular，甚至小程序上，原理都是一样的，通过事件的监听和发布机制，事件数据的通信。