微信小程序如何实现子组件接收数据的监听

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

小程序开发中经常会用到，当父组件传值给子组件时，有时会出现一开始为空，网络请求或者各种操作之后这个值才真正的传过去。我们需要在子组件中监听这个属性值的变化，当这个值存在时，再发起网络请求，从而避免一些问题。

举例比如有子组件son:

<son path="{{path}}"/>

监听实现方法：

  
  properties: {
    path:{
      type:String,
      observer:function(newVal){ // 监听curPath属性变化，若这个值存在，且与即将附在data中的值不同，就满足我们的要求可以进行后续操作啦
        if(newVal && this.data.currentPath !== newVal){
          this.setData({
            currentPath:newVal
          })
          // 发送请求
        }
      }
    }
  },

在小程序组件中有一个数据监听器，用法与上面的类似：

数据监听器

数据监听器可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 [2.6.1]

Component({
  observers: {
    'some.subfield': function(subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
      arr12 === this.data.arr[12]
    },
  }
})

注意事项

• 数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
• 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。
• 数据监听器和属性的 observer 相比，数据监听器更强大且通常具有更好的性能。