同页面内组件的交互

组件中自定义事件、动作

若低代码平台预置的事件与动作不能满足您的开发需求，还可以在组件中对其进行自定义，以实现业务逻辑。

低代码平台提供的组件模板中，包含了事件和动作的模板组件（widgetEventTemplate、widgetActionTemplate）。在经典版管理中心的“应用管理 > 页面资产管理 > 组件模板”中，可查找并下载组件模板。

图1 事件、动作组件模板

组件模板中包含多种功能的示例组件，可以参考组件模板开发自定义组件，组件模板的下载及说明请参见在线开发高级组件。

在组件模板代码中，包含低代码平台定义的事件、动作的注册和触发API（应用程序接口），详细介绍如表1所示。

表1 事件、动作API说明
类型	函数	功能及参数描述
事件	Studio.registerEvents( thisObj, "eventName", "Event Label", [] );	低代码平台定义的注册事件的API，只有通过此API注册后的事件，才会在组件的事件列表中展现。 thisObj：当前组件实例对象，指为该组件注册事件。 "eventName"：事件名称，应该与触发事件API中的第一个参数保持一致。 "Event Label"：事件标签名，在事件列表中展示的事件标题。 []：定义该事件触发时传递的参数模型，例如[{"name": "param"}] 。
事件	thisObj.triggerEvent( "eventName", {} );	低代码平台定义的触发事件的API。 "eventName"：指定触发的事件名称。 {}：为事件触发时传递的参数赋值，例如{param: value}。
动作	Studio.registerAction( thisObj, "actionName", "Action Label", [], $.proxy(this.receiveActionCbk, this), [] );	低代码平台定义的注册动作的API，只有通过此API注册后的动作，才会在组件的动作列表中展现。 thisObj：当前组件实例对象，指为该组件注册动作。 "actionName"：动作名称。 "Action Label"：动作标签名，在动作列表中展示的动作标题。 []：事件触发时传入的参数。 $.proxy(this.receiveActionCbk, this)：该动作的回调函数，在回调函数中定义该动作的执行逻辑。 []：此参数在开发过程中置为空数组即可。

本章节以模板组件widgetEventTemplate、widgetActionTemplate为例，向您介绍上述关于事件和动作API的使用方法。

在事件和动作的模板组件中，主要实现如下图所示。单击widgetEventTemplate中的“trigger Event”按钮，可将此组件输入框中的文本传递给widgetActionTemplate组件，在widgetActionTemplate组件中执行动作，将文本显示到该组件的输入框中。

图2 事件、动作组件示例

其主要实现如下：

widgetEventTemplate组件

在“widgetEventTemplate.js”文件中注册名称为“sendEvent”的事件，并在单击“trigger Event”按钮的时触发“sendEvent”事件，代码如下所示。

var sendEventConfig = [{
    "name": "param1",
    "displayName": "Param1"
}];
Studio.registerEvents(
    thisObj,
    "sendEvent",
    "Send Event",
    sendEventConfig
);

在“trigger Event”按钮的单击事件中，触发“sendEvent”事件。

$("#triggerEvent", elem).bind('click', function () {
     if ($("#eventParam", elem).val()) {
         thisObj.triggerEvent("sendEvent", {
             param1: $("#eventParam", elem).val()
         });
     }
})

widgetActionTemplate组件

在widgetActionTemplate组件“widgetActionTemplate.js”文件中注册“receiveAction”动作，并定义“receiveActionCbk”作为该动作的回调函数，设置输入框的值。

Studio.registerAction(
    thisObj, 
    "receiveAction", 
    "Receive Action", 
    [], 
    $.proxy(this.receiveActionCbk, this), 
    []
);

定义“receiveActionCbk”回调函数。

receiveActionCbk: function(data){
    var thisObj = this;
    var elem = thisObj.getContainer();
    $("#receivedParam",elem).val(data.eventParam.param1)
}

同页面内组件的交互

将模板组件widgetEventTemplate、widgetActionTemplate上传至组件库，并在高级页面中测试。

参考上传自定义组件中操作，上传组件模板widgetEventTemplate、widgetActionTemplate。
上传组件后，打开一个高级页面，在组件列表中将已上传的组件，拖拽到画布中。

图3 使用事件、动作组件模板
配置事件、动作。
选中组件widgetEventTemplate，在“事件”页签下单击“sendEvent”后的，选择“新建动作 > widgetActionTemplate (widget2) > Receive Action”。
单击页面上方的，保存页面。
保存成功后，单击，进入预览页面，查看效果。