微信小程序父子组件之间的数据传递

1.父子组件之间通信的 3 种方式
① 属性绑定
用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据(只能传递数据，不能传递
方法)
② 事件绑定
用于子组件向父组件传递数据，可以传递任意数据(包括数据和方法)
③ 获取组件实例
父组件还可以通过 this.selectComponent() 获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法

2. 属性绑定
   属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。
   父组件的示例代码如下：

data: {
 // 父组件中的data节点
 count: 0
}
// 父组件的wxml结构
<my-test3 count="{{count}}"></my-test3>
<view>------</view>
<view>父组件中，count值为 {{count}}</view>

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

// 子组件的properties 节点
properties: {
count: Number
}
// 子组件的wxml结构
<text>子组件中， count值为：{{count}}</text>

3.事件绑定
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：
① 在子组件的 js 中，在特定的时机通过调用 this.triggerEvent (‘自定义事件名称’, { /* 参数对象
*/ })产生一个自定义事件, 并且可以带上事件参数对象.
② 在父组件的 wxml 中的子组件标签中，使用 bind :自定义事件名称="事件处理函数"监听自定义事
件。
③ 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
④ 在父组件的 事件处理函数中，通过 e.detail 获取到子组件传递过来的数据。
步骤1：在子组件的 js 中，在特定的时机通过调用 this.triggerEvent 产生一个自定义事件

// 子组件中的 wxml结构
<text>子组件中，count值为： {{count}}</text>
<button bindtap="addCount">+1</button>
// 子组件中的js代码
methods: {
  addCount() {
    // this.setData这行代码写的很多此一举
    // 因为只要父组件修改了它传递到子组件的数据, 子组件自然就随之进行更新了
    this.setData({
      count: this.properties.count + 1
   })
    // 使用 this.triggerEvent去触发父组件的自定义事件
    // 并将数值同步给父组件
    this.triggerEvent('sync', {value: this.properties.count})
    }
   }

步骤2：在父组件的 wxml 中的子组件标签中，使用 bind :自定义事件名称=“事件处理函数”监听
自定义事件

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

步骤3：在父组件的 js 中，定义一个函数，这个函数在自定义事件产生的时候, 会得到执行

// 在父组件的JS文件中，定义一个事件
syncCount (e) {
  console.log(e)
}

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

// 父组件的js文件
syncCount (e) {
  this.setData({
    // 父组件通过事件对象 e 获取到子组件传递的值
    count: e.detail.value
 })
}

4.获取组件实例

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

<!--父组件的wxml文件-->
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount">
</my-test>
<button bindtap="getChild">获取子组件实例</button>
//父组件的js文件 按钮的tap事件处理函数
getChild() {
  // 切记下面的参数不能传递标签选择器，不然返回的是null
  // 也可以传递ID选择器
  const child = this.selectComponent('.customA')
  // 调用子组件的setData方法，修改count的值，
  child.setData({ count: this.data.count + 1 })
  child.addCount() // 直接调用子组件的addCount方法，该方法在child实例对象的__proto__上可以访问到该方法
}