父子组件通信的3种方式：属性绑定、事件绑定、获取组件实例

1. 属性绑定：

• 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据

2. 事件绑定：

• 用于子组件向父组件传递数据，可以传递任意数据

3. 获取组件实例：

• 父组件还可以通过this.selectComponent()获取子组件实例对象
• 这样可以直接访问子组件的任意数据和方法

属性绑定

属性绑定用于实现父向子传递，而且只能传递普通类型的数据，无法将方法传递给子组件，如：

<my-test max="10"></my-test>

my-test

Component({
  properties: {
   max:{
     type:Number,
     value:0,
   },
   min:Number
  },
  methods: {
    // 子组件内部修改父组件传递值
    addMax(){
      this.setData({max:this.properties.max+1})
    },
  }
})

事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。如：

// 父组件.wxml
// 推荐（结构清晰）
<my-test max="{{max}}" bind:sync="syncCount"></my-test>
// 或
<my-test max="{{max}}" bindsync="syncCount"></my-test>

// 父组件.js 父组件通过e.detail获取子组件传递过来的数据
Page({
  syncCount(e){
    this.setData({max:e.detail.value});
  },
})

this.triggerEvent('自定义事件名称',参数对象)

// 子组件
    addMax(){
      this.triggerEvent('sync',{value:this.this.properties.max})
    },

获取组件实例

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

// 父组件 .wxml
<my-test max="{{max}}" bind:sync="syncCount" class=customA></my-test>

// 父组件  .js
  syncCount(e){
    // 只能传id或class
    const child=this.selectComponent(".customA")
    // 调用子组件setData方法
    child.setData({max:child.properties.max+1})
  },