title: Events category: Components chinese: 事件通信 repo: events cols: 1

使用全局事件订阅监听模式的组件通信方式

实现了单例模式, 一个项目下对该模块的引用实际上是同一个事件对象

所以可以在不同组件间传递事件及数据

使用方法

推荐 使用 ES7 decorator 的形式对组件类进行修饰

import Events from '@jxkang/events';

@Events
export default class MyComponent extends React.Component {
  componentDidMount () {
    // 监听事件
    this.on('eventName', (ev, data) => {
      // 处理 data
    });
  }

  handleClick (ev) {
    // 触发事件
    this.emit('eventName', ev, { foo: 'bar' });
  }

  render () {
    return (
      <div onClick={this.handleClick.bind(this)}>Click me!</div>
    );
  }
}

eventName 的命名空间

由于事件对象是全局共享的, 所以为了避免事件名称的冲突, 需要自行组织事件名的命名空间.

推荐用法: 使用数据的名称/页面或者组件的名称 + 事件名称, 例如: user-interface:click, page:shop:keyup

API

| API 名 | 说明 | 是否有参数 | 参数类型 | 参数值 | 备注 | | ----- | ---------- | ----- | ---------------------------------------- | ---- | ---------------------------------------- | | on | 添加事件监听器 | 是 | eventName: string, callback: function | | emit 的多个数据, 会依次传递给 callback 函数. 返回值是传入的 callback 函数, 可以传递给 off 方法来取消事件绑定 | | once | 添加一次性事件监听器 | 是 | eventName: string, callback: function | | 同上, 但是触发1次后失效 | | emit | 触发一个事件 | 是 | eventName: string, [data: any], [data: any], ... | | 可以传递任意多个数据 | | off | 解除事件监听器 | 是 | eventName: string, callback: function | | |

Appreciate

Author

TanShenghu (福虎)