event - 事件 API

模块简介

负责事件处理 API，支持自定义监听事件、触发事件。

方法签名（functions）

on

监听事件

类型定义

  1. function on(event: string, listener: (...args: unknown[]) => void): void;

off

取消监听事件

类型定义

  1. function off(event: string, listener: (...args: unknown[]) => void): void;

emit

触发事件

类型定义

  1. function emit(event: string, ...args: unknown[]): void;

使用示例

事件触发和监听

  1. const eventName = 'eventName';
  3. // 事件监听
  4. event.on(`common:${eventName}`);
  6. // 触发事件
  7. event.emit(eventName);

setter 和 setter/plugin 之间的联动

在 A setter 中进行事件注册：

  1. import { event } from '@alilc/lowcode-engine';
  3. const SETTER_NAME = 'SetterA';
  5. class SetterA extends React.Component {
  6.   componentDidMount() {
  7.     // 这里由于面板上会有多个 setter，使用 field.id 来标记 setter 名
  8.     this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`;
  9.     event.on(`common:${this.emitEventName}.bindEvent`, this.bindEvent)
  10.   }
  12.   bindEvent = (eventName) => {
  13.     // do someting
  14.   }
  16.   componentWillUnmount() {
  17.       // setter 是以实例为单位的，每个 setter 注销的时候需要把事件也注销掉，避免事件池过多
  18.     event.off(`common:${this.emitEventName}.bindEvent`, this.bindEvent)
  19.   }
  20. }

在 B setter 中触发事件，来完成通信：

  1. import { event } from '@alilc/lowcode-engine';
  3. class SetterB extends React.Component {
  4.   bindFunction = () => {
  5.     const { field, value } = this.props;
  6.     // 这里展示的和插件进行通信, 事件规则是插件名 + 方法
  7.     event.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
  8.   }
  9. }