优维低代码（构件事件传递）

大鹏一日同风起，扶摇直上九万里。这篇文章主要讲述优维低代码：构件事件传递相关的知识，希望能为你提供帮助。

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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"

]