There are three basic modes for inter-component communication:
A custom component can trigger any event, and the parent component can listen for these events. The method of listening for custom component events is the same as that of listening for basic component events.
The sample code snippet is as follows:
<!-- When the custom component triggers myevent, call the myEventListener API. --> <my-component bindmyevent="myEventListener" /> <!-- The code can also be written as follows. --> <my-component bind:myevent="myEventListener" />
Page({
myEventListener: function(e){
console.log(e.detail) // detail object provided when the custom component triggers an event.
}
}) The custom component can use triggerEvent to trigger an event. When using the API, pass in parameters such as the event name, detail object, and event options.
The sample code snippet is as follows:
<!-- In the subcomponent --> <button bindtap="onTap">Click this button to trigger myevent</button>
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail object provided for the event listening function.
var myEventOption = {} // Event options.
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
}) Option | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
bubbles | Boolean | No | false | Whether to enable event bubbling. |
composed | Boolean | No | false | Whether an event can cross the component boundary. The value false means that the event can only be triggered within the node trees of the referenced component and cannot enter any other component. |
capturePhase | Boolean | No | false | Whether an event has a capture phase. |
The parent component can call this.selectComponent to obtain a child component instance. When using the API, pass in the matching selector, such as this.selectComponent(".my-cust-component").
The sample code snippet is as follows:
// Parent component
Page({
data: {},
getChildComponent: function() {
const child = this.selectComponent('.my-cust-component');
console.log(child);
}
}) In the previous example, the parent component obtains a subcomponent instance with a class being my-cust-component, which is equivalent to this of the subcomponent.
If you need to customize the data returned by selectComponent, you can use the built-in behavior: has://component-export.
In the export field, specify the value returned when selectComponent is called for the custom component.
The sample code snippet is as follows:
// Custom component named my-component
Component({
behaviors: ['has://component-export'],
export() {
return { myField: 'myValue' }
}
}) <!-- Use of the custom component --> <my-component id="my-id" />
// The parent component calls selectComponent.
const child = this.selectComponent('#my-id') // Return { myField: 'myValue' } In the previous example, when the parent component calls selectComponent to select the child component instance whose ID is my-id, the return value is {myField: 'myValue'}.