优维低代码：构件事件传递

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

在上一篇《优维低代码：构件参数传递》的技术分享中，我们讲到构件的数据可来自于后台的接口。下面将分享构件间传递事件常见的业务场景，以及分布调用的方式。

{"brick": "cmdb-instances.instance-edit","properties": {"objectId": "APP","instanceId": "${instanceId}","fieldsByTag": [{"name": "基本信息","fields": ["name", "_hierarchy"]}]},"events": {"update.single.success": [{"action": "message.success","args": ["编辑成功"]},{"action": "history.push","args": ["${APP.homepage}/${instanceId}/detail"]}],"update.single.failed": {"action": "handleHttpError"}}
}

构件间可传递事件，常见的业务场景比如：

• 点击列表的某个字段弹窗显示详情
• 时间选择器更改时间后对应的图表构件要刷新数据
• 编辑保存后提示成功，并跳转到详情页面

这里对events部分做详解。如上示例，大伙会发现events是一个字典，字典的 key 为事件的名字，value 为事件的行为列表，可定义多个行为，按顺序执行：

• target：表示调用哪个构件，字段为 Css Selector，因此构件名称中的 . 需要转义，写成\\.
• action：框架封装的内置动作通过action而不是target调用
• method：指定调用target构件的方法
• args：给method传递参数

# 调用 provider

{"brick": "forms.general-form","events": {"validate.success": [{"target": "workbench\\.provider-modify-ldap-password","method": "executeWithArgs","args": ["${EVENT.detail}"]}]},"slots": {...}
}

workbench.provider-modify-ldap-password的定义如下，只有一个入参params

interface ModifyLdapPasswordParams {oldPassword: string;newPassword: string;confirmPassword: string;
}export function ModifyLdapPassword(params: ModifyLdapPasswordParams
): Promise<any> {// 去除其他代码
}customElements.define("workbench.provider-modify-ldap-password",createProviderClass(ModifyLdapPassword)
);

这里${EVENT.detail}的值为

{"oldPassword": "aaa","newPassword": "bbb","confirmPassword": "bbb"
}

# 分步的调用方式

provider 还支持一个暂存参数的能力，可以通过updateArgs预设部分args，然后再通过updateArgsAndExecute来执行，如下所示：

{"brick": "forms.general-form","events": {"validate.success": [{"target": "workbench\\.provider-modify-ldap-password","method": "updateArgsAndExecute","args": [{"detail": {"0": "${EVENT.detail}"}}]}]},"slots": {...}
}

注意：在调用 Provider 构件的updateArgsAndExecute方法时，args一定要按如上示例的方式来写。 "0"表示第 1 个参数，"1"表示第 2 个参数。故如果你想只更新第 2 个参数，可以写成：

"args": [{"detail": {"1": "xxx"}}
]

如果第 1 个参数是一个object类型，也是最终 merge 起来的。比如最 1 次updateArgs是{"a": 1}，第 2 次是{"b": 1}，最终execute的时候args则会合并起来，变成{"a": 1, "b": 2}。

# Provider 执行后直接更新其他构件的属性

provider 构件也会发出事件出来，在有些时候，我们希望在这个接口执行成功后则去更新其他构件的属性，示例代码如下：

{"brick": "providers-of-cmdb.instance-api-get-detail","properties": {"args": ["_ISSUE""xxxxx"],},"bg": true,"events": {"response.success": [{"target": "#issue-detail-description","properties": {"textContent": "${EVENT.detail.description}"}}]}
}

# 调用内置动作

{"action": "history.push","args": ["${APP.homepage}/${instanceId}/detail"]
}

框架封装了几个内置动作，注意其调用方式不是target，而是action。