在上篇文章中，我们主要讲解了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 地址： https://github.com/CloudWise-OpenSource/FlyFish
Gitee 地址：FlyFish: 飞鱼（FlyFish）是一个数据可视化编码平台。通过简易的方式快速创建数据模型，通过拖拉拽的形式，快速生成一套数据可视化解决方案。
FlyFish 贡献指南：http://bbs.aiops.cloudwise.com/d/717-flyfish
FlyFish 模版中心： https://www.cloudwise.ai/flyFishComponents.html