开发指南/开发小程序（不推荐）/小程序组件/自定义组件/组件间通信与事件
# 组件间通信与事件

## 组件间通信

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

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

## 监听事件

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

监听自定义组件事件的方法与监听基础组件事件的方法完全一致：

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

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

## 触发事件

自定义组件触发事件时，需要使用 `triggerEvent` 方法，指定事件名、`detail` 对象和事件选项。

示例代码：

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

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

this.triggerEvent(
        'myevent',
        myEventDetail,
        myEventOption
      )
    }
  }
})
```
触发事件的选项包括：

|选项名|类型|是否必填|默认值|说明|
|-----|---|-------|---|---|
|bubbles|Boolean|否|false|事件是否冒泡|

关于冒泡和捕获阶段的概念，请阅读 [TTML-事件](https://open.larksuite.com/document/uYjL24iN/uQDOuQDOuQDO) 章节中的相关说明。

示例代码：

页面 `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 })

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