概述

observer 用于監(jiān)聽(tīng)和響應(yīng)任何屬性和數(shù)據(jù)字段的變化。可以同時(shí)監(jiān)聽(tīng)多個(gè)。一次 setData 最多觸發(fā)每個(gè)監(jiān)聽(tīng)器一次。同時(shí)也可以監(jiān)聽(tīng)子數(shù)據(jù)字段

效果

父組件WXML

<view class="container">
  <view class="title">Observer數(shù)據(jù)監(jiān)聽(tīng)器</view>
  <view>父組件向子組件傳值</view>
  <input class="inp" bindinput='bindInputVal' placeholder="請(qǐng)輸入傳入num的值"></input>
  <view>更改姓名</view>
  <input class="inp" bindinput='bindInputName' placeholder="請(qǐng)輸入需要更改的姓名"></input>
  <observer num="{{num}}" person="{{person}}"></observer>
</view>

父組件JS

//獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    num: null,
    person: {
      name: '秋天的第一口西北風(fēng)',
      age: 20,
      sex: '男',
      subject: [
        { id: 1, title: '語(yǔ)文', score: 81 },
        { id: 2, title: '數(shù)學(xué)', score: 92 },
        { id: 3, title: '英語(yǔ)', 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對(duì)象</view>
      <view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">
      	姓名: {{person.name || '暫無(wú)'}}，年齡：{{person.age || 0}}，性別：{{person.sex || '男'}}
      </view>
    </view>
    <view class="cont">
      <view>子組件中單個(gè)數(shù)據(jù)監(jiān)聽(tīng)</view>
      <input class="inp" bindinput='bindInputVal' placeholder="請(qǐng)輸入aloneVal的值"/>
      <view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">改變后的aloneVal值：{{aloneVal}}</view>
    </view>
    <view class="cont">
      <view>子組件中多個(gè)數(shù)據(jù)監(jiān)聽(tīng)</view>
      <input class="inp" bindinput='bindInputOneVal' placeholder="請(qǐng)輸入oneVal的值"/>
      <input class="inp" bindinput='bindInputTwoVal' placeholder="請(qǐng)輸入twoVal的值"/>
    </view>
  </view>
</view>

子組件JS

子組件接收的屬性的值如果為 null, undefined, ‘ ’，properties 的 observer 監(jiān)聽(tīng)不到

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: {
    // 監(jiān)聽(tīng)全部 setData，每次 setData 都觸發(fā)，一般用不到 '**' 監(jiān)聽(tīng)全部
    '**' (val) {
      console.log('**所有的setData變化：', val) // 此時(shí)返回的 val 值是一個(gè)包含所有data變量的對(duì)象
    },
    // 監(jiān)聽(tīng) properties 接收的值的變化
    'num' (val) {
      console.log('observers-num', val)
    },
    // 監(jiān)聽(tīng)對(duì)象
    'person' (val) {
      console.log('observers-person', val)
    },
    // 監(jiān)聽(tīng)對(duì)象的屬性
    'person.name' (val) {
      console.log('observers-person.name', val)
    },
    // 監(jiān)聽(tīng)子組件中單個(gè)數(shù)據(jù)的變化
    'aloneVal' (val) {
      console.log('aloneVal', val)
    },
    // 監(jiān)聽(tīng)子組件中多個(gè)數(shù)據(jù)的變化
    'oneVal, twoVal' (val1, val2) {
      console.log('oneVal', val1)
      console.log('twoVal', val2)
    }
  },
  // 在組件在視圖層布局完成后執(zhí)行
  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;
}