微信小程序中observer的详解

秒速五厘米 2021-09-02 06:56 2507阅读 0赞

# 概述 #

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

# 效果 #

![在这里插入图片描述][20200929205408709.gif_pic_left]

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

# 子组件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;
    }

[20200929205408709.gif_pic_left]: /images/20210813/6dab0ffc1bea427ea951fc1a440d8500.png