@tanshenghu/events
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @tanshenghu/events

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

9.48 kB

Total Files

9

Last publish

Collaborators

  • tanshenghu