# Inter-component communication and events

# Communication between components

There are several basic communication methods between components.

• WXML Data binding: Used by a parent component to set data to a specified property of a child component. JSON Compatible data (from base library version) 2.0.9 Start, you can also include functions in the data). Specifically in Component Templates and Styles Introduced in the chapter.
• Event: Used by a child component to pass data to the parent component. Arbitrary data can be passed.
• If the above two methods are not enough to meet the needs, the parent component can also pass the this.selectComponent Method to obtain the child component instance object, so that you can directly access arbitrary data and methods of the component.

# Listening events

Event system is one of the main ways of communication between components. A custom component can trigger arbitrary events that can be listened to by the page that references the component. For the basic concepts and usage of events, see event 。

The way to listen for custom component events is exactly the same as the way to listen for the underlying component events:

Code example:

<!-- When a custom component fires a "myevent" event, the "onMyEvent" method is called -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- Or it could be written as -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // The detail object provided when a custom component fires an event
  }
})

# Trigger event

When a custom component triggers an event, you need to use the triggerEvent Method, specifying the event name, detail object, and event options:

Code example:

{% Minicode ('DFfYSKmI6vZD') %}

<!-- In Custom Components -->
<button bindtap="onTap" >Clicking this button will trigger the "myevent" event</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // Detail object, supplied to the event listener function
      var myEventOption = {} // Options for triggering events
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

Options for triggering events include:

For the concept of the bubble and capture phase, read the event Relevant instructions in the section.

Code example:

{% Minicode ('UGfljKm66zZ1') %}

// page page.wxml
<another-component bindcustomevent="pageEventListener1">
  <my-component bindcustomevent="pageEventListener2"></my-component>
</another-component>

// assembly another-component.wxml
<view bindcustomevent="anotherEventListener">
  <slot />
</view>

// assembly my-component.wxml
<view bindcustomevent="myEventListener">
  <slot />
</view>

// assembly my-component.js
Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {}) // Will only trigger pageEventListener2
      this.triggerEvent('customevent', {}, { bubbles: true }) // Will trigger in turn pageEventListener2 、 pageEventListener1
      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // Will trigger in turn pageEventListener2 、 anotherEventListener 、 pageEventListener1
    }
  }
})

# Get a Component Instance

Can be called in the parent component this.selectComponent , gets the instance object of the child component.

You need to pass in a match selector selector, such as:this.selectComponent(".my-component")。

selector Detailed syntax can be viewed selector Syntax Reference Documentation。

Code example:

{% Minicode ('oQ64sFmm7rhD') %}

// Parent Component
Page({
  data: {},
  getChildComponent:  function () {
    const child = this.selectComponent('.my-component')
    console.log(child)
  }
})

In the above example, the parent component will get the class for my-component Of the child component instance object, that is, the this 。

Be careful : By default, components between Mini Programs and plug-ins, and between different plug-ins will not be able to pass through selectComponent Gets the component instance (which returns the null）。If you want to make a component under the above conditions can still be selectComponent Returns, you can customize its return results (see below).

# Custom Component Instances Get Results

If you need custom selectComponent The returned data can be obtained using the built-in behavior: wx://component export

From the base library version 2.2.3 Start providing support.

Use this behavior In the custom component export The definition section is used to specify that the component is to be selectComponent The return value when called.

Code example:

{% Minicode ('ZtosuRmK741Y') %}

// Custom Components my-component internal
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})

<!-- When using custom components -->
<my-component id="the-id" />

// Parent Component Call
const child = this.selectComponent('#the-id') // Be equal to { myField: 'myValue' }

In the above example, the parent component gets the id for the-id Of the subcomponent instance, you get the object { myField: 'myValue' } 。