概述

observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段

效果

父组件WXML

<view class="container">
  <view class="title">Observer数据监听器</view>
  <view>父组件向子组件传值</view>
  <input class="inp" bindinput='bindInputVal' placeholder="请输入传入num的值"></input>
  <view>更改姓名</view>
  <input class="inp" bindinput='bindInputName' placeholder="请输入需要更改的姓名"></input>
  <observer num="{{num}}" person="{{person}}"></observer>
</view>

父组件JS

//获取应用实例
const app = getApp()

Page({
  data: {
    num: null,
    person: {
      name: '秋天的第一口西北风',
      age: 20,
      sex: '男',
      subject: [
        { id: 1, title: '语文', score: 81 },
        { id: 2, title: '数学', score: 92 },
        { id: 3, title: '英语', score: 76 }
      ]
    }
  },
  // 获取 num 的值
  bindInputVal(e) {
    this.setData({
      num: e.detail.value
    })
  },
  // 修改姓名
  bindInputName(e) {
    this.setData({
      'person.name': e.detail.value
    })
  }
})

子组件WXML

<view class="container">
  <view class="item">
    <view class="cont">
      <view>父组件传入的num值</view>
      <view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">改变后的num值: {{num}}</view>
    </view>
    <view class="cont">
      <view>父组件传入的person对象</view>
      <view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">
      	姓名: {{person.name || '暂无'}}，年龄：{{person.age || 0}}，性别：{{person.sex || '男'}}
      </view>
    </view>
    <view class="cont">
      <view>子组件中单个数据监听</view>
      <input class="inp" bindinput='bindInputVal' placeholder="请输入aloneVal的值"/>
      <view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">改变后的aloneVal值：{{aloneVal}}</view>
    </view>
    <view class="cont">
      <view>子组件中多个数据监听</view>
      <input class="inp" bindinput='bindInputOneVal' placeholder="请输入oneVal的值"/>
      <input class="inp" bindinput='bindInputTwoVal' placeholder="请输入twoVal的值"/>
    </view>
  </view>
</view>

子组件JS

子组件接收的属性的值如果为 null, undefined, ‘ ’，properties 的 observer 监听不到

Component({
  properties:{
    num: {
      type: String,
      observer: function(newVal, oldVal) {
        console.log('properties-num', newVal)
      }
    },
    person: {
      type: Object,
      observer: function(newVal, oldVal) {
        console.log('properties-person', newVal)
      }
    }
  },
  data: {
    aloneVal: 0,
   >: null,
    twoVal: null
  },
  observers: {
    // 监听全部 setData，每次 setData 都触发，一般用不到 '**' 监听全部
    '**' (val) {
      console.log('**所有的setData变化：', val) // 此时返回的 val 值是一个包含所有data变量的对象
    },
    // 监听 properties 接收的值的变化
    'num' (val) {
      console.log('observers-num', val)
    },
    // 监听对象
    'person' (val) {
      console.log('observers-person', val)
    },
    // 监听对象的属性
    'person.name' (val) {
      console.log('observers-person.name', val)
    },
    // 监听子组件中单个数据的变化
    'aloneVal' (val) {
      console.log('aloneVal', val)
    },
    // 监听子组件中多个数据的变化
    'oneVal, twoVal' (val1, val2) {
      console.log('oneVal', val1)
      console.log('twoVal', val2)
    }
  },
  // 在组件在视图层布局完成后执行
  ready: function() {
    
  },
  methods: {
    bindInputVal(e) {
      this.setData({
        aloneVal: e.detail.value
      })
    },
    // 获取>bindInputOneVal(e) {
      this.setData({
       >: e.detail.value
      })
    },
    // 获取 twoVal 的值
    bindInputTwoVal(e) {
      this.setData({
        twoVal: e.detail.value
      })
    }
  }
})

子组件WXSS

.container {
  width: 100%;
}
.item {
  width: 100%;
  margin-top: 10rpx;
}

.cont {
  width: 100%;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
}

.cont .inp {
  margin-top: 10rpx;
  border: 1rpx solid #acacac;
  border-radius: 30rpx;
  padding: 6rpx 32rpx;
}