数据可视化系列教程之组件通信

在上篇文章中，我们主要讲解了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

组件内部事件

开源福利

如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，在 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