Communication and events between WeChat applet components

In the WeChat applet, here are three ways to establish communication between components:

1. The parent component passes the value to the child component, which is realized by setting the value of the attribute specified by the parent component to the child component

In subcomponent wxml

<text>子组件中count的值：{
   
   {num}}</text>

num is the attribute in the corresponding .js file

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num:Number
  }

• In the parent component wxml

<my-test6 num="{
   
   {s}}"></my-test6>

<View>~~~~~~~~~~~~~~</View>

<view>父组件count值为：{
   
   {s}}</view>

Define data s in the corresponding .js file

  data: {
    s:1
  }

In this way, the value 1 of s in the parent component can be passed to the child component attribute num

• running result

 

2. The child component passes the value to the parent component through the event

Divided into four steps:

• In the js file of the parent component, define a function that is passed to the child component through a custom event
• In the wxml file of the parent component, pass the function reference defined in the previous step to the child component by means of a custom event
• In the js of the child component, send data to the parent component by calling this.triggerEvent('custom event name')
• In the js of the parent component, get the data passed by the child component through e.detail

Write today's code for the above steps

Step 1: In the js file of the parent component, define a function

syncCount(e){
    
  }

Step 2: In the wxml file of the parent component, pass the function reference to the child component, using bind:

<my-test6 sum="{
   
   {count}}" bind:sync="syncCount"></my-test6>

Step 3: In the js of the child component, send data to the parent component by calling this.triggerEvent('custom event name')

 addCount(){
      this.setData({
        num:this.properties.num + 1
      })
      this.triggerEvent('sync',{value:this.properties.num})
    }

Step 4: In the js of the parent component, get the data passed by the child component through e.detail

syncCount(e){
    this.setData({
      s:e.detail.value
    })
  }

Realize the effect:

component communication

3. The parent component passes the value by obtaining the instance of the child component

In the parent component, use this.selectComponent to get the instance of the child component. The child component selector can only use class or id

In the wxml file of the parent component, declare the class selector of the child component as test6:

<my-test6 sum="{
   
   {count}}" bind:sync="syncCount" class="test6"></my-test6>

The js file corresponding to the parent component can call the method of the child component after obtaining the child component instance

getChild(){
    const child = this.selectComponent('.test6')
    console.log(child)
    child.addCount()
  }