在上篇文章中，我们主要讲解了 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 地址：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 面对面交流。