# 同页面内组件的交互
#### 组件中自定义事件、动作
若低代码平台预置的事件与动作不能满足您的开发需求，还可以在组件中对其进行自定义，以实现业务逻辑。
低代码平台提供的组件模板中，包含了事件和动作的模板组件（widgetEventTemplate、widgetActionTemplate）。在经典版管理中心的"应用管理 \> 页面资产管理 \> 组件模板"中，可查找并下载组件模板。
图1事件、动作组件模板   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886144.png "点击放大")
![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png)
组件模板中包含多种功能的示例组件，可以参考组件模板开发自定义组件，组件模板的下载及说明请参见[在线开发高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0183.html)。
在组件模板代码中，包含低代码平台定义的事件、动作的注册和触发**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事件、动作组件示例   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284673.png "点击放大")
其主要实现如下：
- **widgetEventTemplate组件**
  在"widgetEventTemplate.js"文件中注册名称为"sendEvent"的事件，并在单击"trigger Event"按钮的时触发"sendEvent"事件，代码如下所示。
  - 注册"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"作为该动作的回调函数，设置输入框的值。
  - 注册"receiveAction"动作。
    ```
    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上传至组件库，并在高级页面中测试。
1. 参考[6](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0183.html#astrozero_05_0183__li115551942524)中操作，上传组件模板widgetEventTemplate、widgetActionTemplate。
2. 上传组件后，打开一个高级页面，在组件列表中将已上传的组件，拖拽到画布中。 
   图3使用事件、动作组件模板   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933045556.png "点击放大")
   
   
3. 配置事件、动作。 
   选中组件widgetEventTemplate，在"事件"页签下单击"sendEvent"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284681.png)，选择"新建动作 \> widgetActionTemplate (widget2) \> Receive Action"。
   
   
4. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284697.png)，保存页面。
5. 保存成功后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886180.png)，进入预览页面，查看效果。