微信小程序：巧用监听，让子组件灵敏接收父组件数据变化

2024-02-01 23:02:41

子组件监听父组件数据变化的必要性

在微信小程序开发中，父组件与子组件之间的数据通信十分常见。通常，父组件会将一些数据通过属性值的方式传递给子组件。然而，有时会出现这样的情况：当子组件一开始接收父组件的数据时，这些数据可能为空。这可能是由于网络请求的延迟、用户操作的触发等原因造成的。

如果子组件没有监听父组件数据变化的功能，那么它将无法及时获取父组件传递的最新数据。这可能会导致子组件无法正常工作，甚至出现错误。因此，为子组件添加监听父组件数据变化的功能非常有必要。

实现子组件监听父组件数据变化的步骤

1. 在子组件中定义一个监听函数

在子组件的 onLoad() 或 onReady() 生命周期函数中，定义一个监听父组件数据变化的函数。这个函数通常命名为 watchData() 或 observeData()。

Component({
  properties: {
    // 父组件传值的数据属性
    data: {
      type: Object,
      value: {}
    }
  },
  onLoad() {
    this.watchData();
  },

  watchData() {
    // 监听父组件数据变化
    const that = this;
    this.setData({
      dataObserver: function(newVal, oldVal) {
        // 在这里处理父组件数据变化的逻辑
        console.log('父组件数据变化了！', newVal, oldVal);
      }
    });
  }
});

2. 在父组件中触发监听函数

在父组件中，当数据发生变化时，需要触发子组件的监听函数。这可以通过 setData() 方法来实现。

Page({
  data: {
    data: {}
  },

  onLoad() {
    // 模拟网络请求，延迟获取数据
    setTimeout(() => {
      this.setData({
        data: {
          name: '张三',
          age: 20
        }
      });
    }, 2000);
  }
});