@tanshenghu/events v1.0.0

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

Appreciate

Author

TanShenghu (福虎)