数据可视化系列教程之组件通信
在上篇文章中,我们主要讲解了 FlyFish React 组件使用技巧,作为本系列的最后一篇文章,这次我们再来看看组件通信,组件通信(联动)主要是通过一套事件配置来完成。组件中的事件在运行过程中会在特定时机被 trigger。
static events
FlyFish 提供了一个 events 的常量,用于组件订阅一些事件来监听组件内部的事件。比如点击事件、屏幕缩放以及生命周期等。
![](https://static001.geekbang.org/infoq/b0/b030a5dcc79b971080bff9c7cf5c60fb.png)
this.bind|once|unbind
在必要的的时候可以给组件绑定事件来实现功能扩展,组件类 Component 继承了支撑事件机制的基类 Event。
bind(eventName, handler): 绑定事件。
unbind(eventName, handler?): 解绑事件, 若不传 handler 则默认全部解绑。
once(eventName, handler): 绑定仅触发一次事件。
![](https://static001.geekbang.org/infoq/e9/e98782da0b35ead62c0be5a74971d71d.png)
组件联动
组件添加和接收事件:ListenEvent
![](https://static001.geekbang.org/infoq/1a/1aca8c9db99f8bfeeb64a074db340e7d.png)
EmitEvent
![](https://static001.geekbang.org/infoq/70/70144fa3171a0a953fefb1fbd9d33076.png)
创建大屏并添加事件
进入大屏编辑页面
右侧选择 事件 Tab
事件源选择 trigger 事件的组件(即 EmitEvent)
事件类型选择自定义: 内容填写为当前 trigger 名称
操作选择调用组件方法并选择 bind 事件组件(即 ListenEvent)
事件动作选择 tigger
事件类型选择自定义: 内容填写为当前 trigger 名称
组件 DOM 事件
Click
Dbclick
Mousedown
Mouseup
Mousemove
Mouseout
Mouseenter
组件内部事件
![](https://static001.geekbang.org/infoq/8d/8d7c547f7a7a21a496827e6f7fc42283.png)
开源福利
如果喜欢我们的项目,请不要忘记点击下方代码仓库地址,在 GitHub / Gitee 仓库上点个 Star,我们需要您的鼓励与支持。此外,即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。
GitHub 地址: https://github.com/CloudWise-OpenSource/FlyFish
Gitee 地址:https://gitee.com/CloudWise/fly-fish
FlyFish 贡献指南:http://bbs.aiops.cloudwise.com/d/717-flyfish
FlyFish 模版中心: https://www.cloudwise.ai/flyFishComponents.html
微信搜索 xiaoyuerwise 或扫描识别下方二维码,备注【飞鱼】加入 AIOps 社区飞鱼开发者交流群,与 FlyFish 项目 PMC 面对面交流。
评论