Skip to content

内置事件管理

API 提供了一套内置的事件管理系统,帮助开发者在表单中灵活地管理和触发自定义事件。这些事件可以用于组件之间的通信、状态管理、动态行为触发等场景。

数据结构

以下是 Api 内置事件管理相关的数据结构及简明解释:

ts
interface Api {
  // 内置事件管理系统,支持手动触发和监听表单事件
  bus: {
    $emit(event: string, ...args: any[]): void;  // 手动触发事件
    $on(event: string | string[], callback: Function): void;  // 监听事件
    $once(event: string | string[], callback: Function): void;  // 监听一次性事件
    $off(event?: string | string[], callback?: Function): void;  // 取消事件监听
  };
  // 手动触发表单的自定义事件
  emit(event: string, ...args: any[]): void;
}

触发事件

bus.$emit 方法用于手动触发指定的事件,并可以传递多个参数。这些参数会作为事件处理函数的参数进行传递。

typescript
type emit = (event:string, ...args:any[]) => void
  • 示例:
js
fApi.bus.$emit('custom-event', 'param1', 'param2');

触发事件

bus.$on 方法用于监听指定的事件,当事件被触发时,会执行注册的回调函数。可以监听一个或多个事件。

typescript
type on = (event: string, callback: Function) => void
  • 示例:
js
fApi.bus.$on('custom-event', (param1, param2) => {
  console.log('事件被触发:', param1, param2);
});

监听一次性事件

bus.$once 方法用于监听指定的事件,但回调函数只会执行一次,执行完后会自动取消监听。

typescript
type on = (event: string, callback: Function) => void
  • 示例:
js
fApi.bus.$once('init-complete', () => {
  console.log('初始化完成,事件仅触发一次');
});

取消事件监听

bus.$off 方法用于取消对指定事件的监听。

typescript
type off = (event: string, callback: Function) => void
  • 示例:
js
fApi.bus.$off('custom-event', handleCustomEvent);

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用