# 组件自定义事件实现
组件之间的交互，主要包括组件自定义事件和组件响应动作，本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器，当用户操作组件（比如下拉框选中选项）时发出的事件。
#### 注册自定义事件
自定义事件在*{widget}*.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例：
- 在文件global_SelectWidget.editor.js中定义事件
  ```
  eventConfig: {
      sendSelect: {
        desc: { zh_CN: "当选中选项时", en_US: "Select Choose" },
        fields: [
          {
            name: "selectValue",
            desc: { zh_CN: "选项值", en_US: "Select Choose" },
          },
        ],
      },
    },
  ```
  
- 在文件global_SelectWidget.js的init钩子中注册事件
  ```
  * @params thisObj: 组件实例，等同于this
  * @params "sendSelect": 事件key值
  * @params { "zh_CN": "当选中选项时", "en_US": "Select Choose" }: 事件描述，国际化
  * @params []: 空数组，固定写法 （内部组件暂时没有用到过）
  */
  Studio.registerEvents(thisObj, "sendSelect", { "zh_CN": "当选中选项时", "en_US": "Select Choose" }, []);
  ```
  
图1自定义事件配置后效果   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000001965813150.png)
表1eventConfig字段说明 
| 字段         | 类型     | 说明                 |
|:---|:---|:---|
| sendSelect | String | 自定义事件的key值。        |
| desc       | Object | 自定义事件的中英文描述。       |
| fields     | Array  | 自定义事件中，暴露给全局变量的内容。 |
   
#### 触发自定义事件
- 在文件global_SelectWidget.ftl文件中，监听el-select的change事件
  ```
  <el-select
        v-model="selectConfObj.selectValue"
        :disabled="selectConfObj.disabled"
        :popper-append-to-body="false"
        @change="search"
        :multiple="selectConfObj.multiple"
        :clearable="!selectConfObj.multiple"
        collapse-tags
        @visible-change="visibleChange"
        :filterable="selectConfObj.multiple? false: selectConfObj.searchDisabled"
        :filter-method="match"
        :placeholder="selectConfObj.placeholder"
        popper-class="selectWidget"
      >
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :title="item.label">
        </el-option>
   </el-select>
  ```
  
- 在文件global_SelectWidget.js中，触发自定义事件
  ```
  search: function () {
  var params = {
     ...WidgetTools.dataTrans.getDataByKeyAndVal(
        this.selectConfObj.options,
        'value',
        this.selectConfObj.selectValue,
        ['label', 'value'],
      ),
      selectValue: this.selectConfObj.multiple
         ? JSON.stringify(this.selectConfObj.selectValue).slice(1, -1)
         : this.selectConfObj.selectValue,
          };
   thisObj.triggerEvent('sendSelect', params);
   },
  ```
  
 
#### 全局变量
组件触发自定义事件时，可以给全局变量赋值，fields数组中每一个对象保存着暴露给全局变量的详细配置。
图2给全局变量赋值   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424265.png "点击放大")
表2fields数组中对象字段详细说明 
| 字段   | 类型     | 说明          |
|:---|:---|:---|
| name | String | key值。       |
| desc | Object | 字段描述，需要国际化。 |
   
暴露给全局变量的字段，一定要在触发事件参数中定义，如[图3]。
图3定义字段   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158305861.png "点击放大")