@tanshenghu/events

---

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 (福虎)