# 实现组件间通信

组件间的基本通信方式有以下几种：

- `ttml` 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 `json` 兼容数据。

- 事件：用于子组件向父组件传递数据，可以传递任意数据。

本文主要介绍基于事件实现组件间通信的方式。事件系统是组件间通信的主要方式之一，自定义组件可以触发任意事件，引用组件的页面可以监听这些事件。关于事件的基本概念和用法，可参见[事件系统](https://open.feishu.cn/document/uYjL24iN/uQDOuQDOuQDO)。

## 监听事件

监听自定义组件事件的方法与监听基础组件事件的方法完全一致。示例配置如下：

- TTML 中的配置。

```html

<my-component bindmyevent="onMyEvent" />

<my-component bind:myevent="onMyEvent" />
    ```

- Page() 中的配置。

```js
    Page({
      onMyEvent(e) {
        // 自定义组件触发事件时提供的detail对象
        console.log(e.detail);
      }
    })
    ```

## 触发事件

自定义组件触发事件时，需要使用 `triggerEvent` 方法，并指定事件名、`detail` 对象和事件选项。示例代码如下：

- 自定义组件中配置的触发逻辑。

```html

<button bindtap="onTap">点击这个按钮将触发 myevent 事件</button>
    ```

- Component 构造器的配置。

```js
    Component({
      properties: {}
      methods: {
        onTap() {
          var myEventDetail = {} // detail对象，提供给事件监听函数
          var myEventOption = {} // 触发事件的选项

this.triggerEvent(
            'myevent',
            myEventDetail,
            myEventOption
          )
        }
      }
    })
    ```

触发事件的可选项如下表所示。

|选项名|类型|是否必填|默认值|说明|
|-----|---|-------|---|---|
|bubbles|Boolean|否|false|事件是否冒泡。关于冒泡的相关说明，参见[事件系统](https://open.feishu.cn/document/uYjL24iN/uQDOuQDOuQDO#2d2c2ae9)。|

示例代码：

- 页面 `page.ttml` 中的配置。

```html
    <another-component bindcustomevent="pageEventListener1">
      <my-component bindcustomevent="pageEventListener2"></my-component>
    </another-component>
    ```

- 组件 `another-component.ttml` 中的配置。

```html
    <view bindcustomevent="anotherEventListener">
      <slot />
    </view>
    ```

- 组件 `my-component.ttml` 中的配置。

```html
    <view bindcustomevent="myEventListener">
      <slot />
    </view>
    ```

- 组件代码中的配置。

```js
    // 组件 my-component.js
    Component({
      methods: {
        onTap: function(){
          // 只会触发 pageEventListener2
          this.triggerEvent('customevent', {})

// 会依次触发 pageEventListener2 、 pageEventListener1
          this.triggerEvent('customevent', {}, { bubbles: true })
        }
      }
    })
    ```