小程序中组件通信定义组件中父子组件之间的通信分为：属性绑定、事件绑定、获取组件实例。关于属性绑定、事件绑定、获取组件

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

自定义组件中父子组件之间的通信

属性绑定
事件绑定
获取组件实例

属性绑定

概念

属性绑定用于父组件向子组件的指定属性设置数据，而且只能传递普通类型的数据，无法将方法传递给子组件
使用

子组件在 properties 节点中声明对应的属性并使用

示例代码

实现需求：父组件中 count 默认值为 5，将 count 传递到子组件，让子组件的 count 值也显示为5

父组件数据结构
```
Page({
  data: {
    count:5
  }
})
```

父组件页面结构

<view> 父组件中，count的值是：{{count}}</view>
<my-test5 count="{{count}}"></my-test5>

子组件数据结构

Component({
 
  //在 properties 节点中声明对应
  properties: {
    cont: Number
  },
  
  data: {
  
  }
  //.....
})

子组件页面结构

<view> 子组件中，count值是：{{count}}</view>

示例效果

事件绑定

概念

事件绑定用于子组件向父组件传递数据，可以传递任意类型的数据

使用

在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

//在父组件中定义 syncCount 方法
//将来，这个方法会被传递给子组件，供子组件进行调用
syncCount(){
  console.log("syncCount")
}

在父组件的 wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

//使用 （bind:自定义事件的名称=被传递的事件名称） 绑定事件并传递给子组件
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>

在子组件的 js 中，通过调用 this.triggerEvent("自定义事件名称", {参数对象})，将数据发送到父组件

properties: {
  count: Number
},

methods: {
  addCount(){
    this.setData({
      count:this.properties.count + 1
    }),
    //使用 this.triggerEvent("自定义事件名称", {参数对象})， 将数据同步到父组件
    this.triggerEvent("sync", {value:this.properties.count})
  }
}

在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

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

示例代码

实现需求：点击 +1 按钮，子组件中 count 值加1，并将子组件中的 count 值同步到父组件的 count 值，使其同步变化

父组件数据结构

Page({
  data: {
    count:5
  },
  syncCount(e){
    this.setData({
      count: e.detail.value
    })
  }
})

父组件页面结构

<view> 父组件中，count的值是：{{count}}</view>
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>

子组件数据结构

Component({

  properties: {
    count: Number
  },
  
  methods: {
    addCount(){
      this.setData({
        count:this.properties.count + 1
      }),
      this.triggerEvent("sync", {value:this.properties.count})
    }
  }
})

子组件页面结构

<view>子组件中，count值是：{{count}}</view>
<button bindtap="addCount"> +1 </button>

示例效果

获取组件实例

概念

在父组件里，可以调用 this.selectComponent(id或class选择器) 获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器

示例代码

实现需求：点击父组件中的按钮，通过获取子组件，通过子组件实例对象调用其 addCount 方法，实现父组件与子组件 count 值的同步变化

父组件数据结构

Page({

  data: {
    count:5
  },
  
  syncCount(e){
    this.setData({
      count: e.detail.value
    })
  },
  
  getChild(){
    //下面参数不能传递标签选择器，不然会返回 null
    //参数可以是 .customA 也可以是 #cA
    const child = this.selectComponent(".customA")
    //调用子组件 addCount 方法
    child.addCount()
  }
})

父组件页面结构

<view> 父组件中，count的值是：{{count}}</view>
<my-test5 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test5>
<button bindtap="getChild">获得子组件实例</button>

子组件数据结构

Component({
  properties: {
    count: Number
  },
  
  methods: {
    addCount(){
      this.setData({
      count:this.properties.count + 1
    }),
    
    this.triggerEvent("sync", {value:this.properties.count})
    }
  }
})

子组件页面结构

<view>子组件中，count值是：{{count}}</view>
<button bindtap="addCount"> +1 </button>

示例效果