---
title: Communication and Events
---

## Inter-component communication

The following methods are used for communication between components.

- TYML data binding: used to set data from the parent component to the specified property of the child component. Only JSON compatible data can be set.
- Events: used for child components to transfer any type of data to a parent component.
- If the above two methods cannot meet your needs, the parent component can also get the instance object of the child component by using the `this.selectComponent` method. This allows you to directly access any data and methods of the components.

## Listen for events

The event system is one primary method of communication between components. A custom component can trigger any events, and pages that reference the specified component can listen for these events. For more information about event concepts and usage, see [Events](/en/miniapp/develop/miniapp/framework/event/interaction).

You can listen for custom component events in the same way as with basic component events.

**Sample code:**

```xml
<!-- The "onMyEvent" method is called when the custom component triggers "myevent" -->
<component-tag-name bind:myevent="onMyEvent" />
<!-- Alternatively, you can write it like this -->
<component-tag-name bindmyevent="onMyEvent" />
```

```js
Page({
  onMyEvent: function (e) {
    e.detail; // The detail object provided when the custom component triggers an event
  },
});
```

## Trigger an event

When a custom component triggers an event, you need to use the `triggerEvent` method to specify the event name, `detail` object, and event options.


```ts
type ComponentEventOptions = {
  /**
   * Whether the event is bubbling
   */
  bubbles?: boolean;
  /**
   * Whether the event can cross the boundary of the component, when it is false, the event will only be triggered on the node tree of the referenced component, and will not enter any other component
   */
  composed?: boolean;
  /**
   * Whether to include the capture phase
   */
  capturePhase?: boolean;
}

type triggerEvent = (type: string,detail: Record<string, any> = {},  options?: ComponentEventOptions) => void;
```

**Sample code:**

```xml
<!-- In the custom component -->
<button bind:tap="onTap">Tap this button to trigger the "myevent" event</button>
```

```js
Component({
  properties: {},
  methods: {
    onTap: function () {
      var myEventDetail = {}; // The detail object, provided to the event listener function
      this.triggerEvent('myevent', myEventDetail);
    },
  },
});
```