事件联动:
事件联动简单举例,就是点击一个组件,执行相应的一个动作,例如点击按钮组件,打开弹窗组件。
tmagic-editor 事件联动json
浅析一下在tmagic-editor中,事件联动是如何实现的。在tmagic中,有
- 通用的事件联动:如点击组件1,页面滚动到顶部
- 多个组件之间的事件联动:点击组件1,组件2隐藏或展现。
这里主要讲第二种,如何实现,点击一个按钮组件,弹出相应的蒙层组件。在官网配置好具有这种功能的组件后,可以看到按钮组件的dsl如下:
{
type: 'text',
id: 'text_9027',
style: {
width: '280.75',
height: '38.97',
...
},
name: '文本',
text: '${ds_425cf2a6.nickname}',
multiple: true,
events: [
{
name: 'magic:common:events:click',
actions: [
{
actionType: 'comp',
to: 'overlay_0c45b917',
method: 'openOverlay',
codeId: '',
dataSourceMethod: '',
},
],
},
],
created: '',
mounted: '',
displayConds: [],
}
低代码中所有的行为都是通过dsl来进行触发的,从events可以看到,点击该文本组件时,overlay_0c45b917组件执行openOverlay方法。这个流程简单讲就是事件注册和事件监听。但是再讲细一点,具体怎么实现呢。
tmagic-editor 事件联动原理
从c端页面如何执行事件联动开始看起
new Core(c端入口)-> setConfig -> setPage -> bindEvents(遍历页面所有的节点,组件json中有events字段的,对事件名和要执行的方法进行监听,当点击的时候,执行相应的方法)
Q1: 执行的方法,如何知道?
获取json中的events里面的to的组件('overlay_0c45b917')的实例,从实例上拿到method字段('openOverlay')对应的方法。 实例打印如下:
Q2:instance是什么,为什么有这些内容?
同样是c端入口,在bindEvents之前,会根据json,对页面所有的节点执行initNode,在initNode中,对组件的'created','mounted'进行监听(listenLifeSafe方法),并对instance存储,这里的instance就是上面用到的instance,既然有监听,就有相应的事件emit。
Q3: 各个组件的事件如何注册的?
在各个组件的ui渲染器中,会执行useApp方法,useApp中emit的参数emitData,就是我们在packages/Core中接收到的instance的值
总结
简单来讲,分三条线
- ui渲染器,每个组件渲染的时候,在生命周期里会emit事件,如果这个组件有可以被触发的事件就作为参数emitdata
- c端页面new Core时
2.1 每个node初始化时,对步骤一里的事件进行接收,保存instance
2.2 对dsl进行遍历,组件有events字段时,对事件名和方法(方法从instance中获取)进行监听,点击时执行该方法