用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序中observer的详解

Rolan 2021-2-25 16:06

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

概述

    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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

父组件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
    })
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

子组件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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

子组件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,
    oneVal: 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
      })
    },
    // 获取 oneVal 的值
    bindInputOneVal(e) {
      this.setData({
        oneVal: e.detail.value
      })
    },
    // 获取 twoVal 的值
    bindInputTwoVal(e) {
      this.setData({
        twoVal: e.detail.value
      })
    }
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

子组件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;
}
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏