在上篇文章中，我们主要讲解了FlyFish React组件使用技巧，作为本系列的最后一篇文章，这次我们再来看看组件通信，组件通信（联动）主要是通过一套事件配置来完成。组件中的事件在运行过程中会在特定时机被trigger。
static events
FlyFish提供了一个events的常量，用于组件订阅一些事件来监听组件内部的事件。比如点击事件、屏幕缩放以及生命周期等。
this.bind|once|unbind
在必要的的时候可以给组件绑定事件来实现功能扩展，组件类Component继承了支撑事件机制的基类Event。
- bind(eventName, handler): 绑定事件。
- unbind(eventName, handler?): 解绑事件, 若不传 handler 则默认全部解绑。
- once(eventName, handler): 绑定仅触发一次事件。
组件联动
组件添加和接收事件：ListenEvent
EmitEvent
创建大屏并添加事件
- 进入大屏编辑页面
- 右侧选择 事件 Tab
- 事件源选择trigger事件的组件(即EmitEvent)
- 事件类型选择自定义: 内容填写为当前trigger名称
- 操作选择调用组件方法并选择bind事件组件(即ListenEvent)
- 事件动作选择tigger
- 事件类型选择自定义: 内容填写为当前trigger名称
组件DOM事件
- Click
- Dbclick
- Mousedown
- Mouseup
- Mousemove
- Mouseout
- Mouseenter
组件内部事件
| 事件名 | 触发时刻 | 携带参数 | 说明 |
|---|---|---|---|
| mounted | 挂载完成 | ||
| unMount | 挂载完成 | ||
| render | 渲染选项完成 | ||
| update | 更新选项完成 | 要更新的选项 | |
| refresh | 刷新选项完成 | ||
| optionsChange | 选项被改变 | 改变后的全部选项 | 可以作为选项的 filter 使用。 |
| draw | 绘制数据完成 | 绘制的数据 | |
| redraw | 重绘数据完成 | ||
| normalize | 获取标准化数据 | 标准化后的数据 | 可以作为标准化数据的 filter 使用 |
| dataChange | 数据被改变 | 改变后的数据 | 可以作为数据的 filter 使用。 |
| load | 开始加载数据源数据 | ||
| loaded | 数据源数据加载完成 | 数据源数据 |
开源福利
如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，我们需要您的鼓励与支持。此外，即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。
GitHub 地址： github.com/CloudWise-O…
Gitee 地址： gitee.com/CloudWise/f…
FlyFish 贡献指南： bbs.aiops.cloudwise.com/d/717-flyfi…
FlyFish 模版中心： www.cloudwise.ai/flyFishComp…
