原生小程序 之 自定义组件的 监听数据 （简单数据、复杂数据对象）

原生小程序 之 自定义组件的 监听数据 - 简单数据

监听单个数据 与 多个数据

父组件

<!--pages/info/info.wxml-->
<view>
  <test></test>
</view>

// pages/info/info.js
Page({
  data: {
  },
})

{
  "usingComponents": {
    "test":"/component/test/test"
  }
}

子组件

<!--component/test/test.wxml-->
<view>
  <view>{{num1}} + {{num2}} = {{ sum }} </view>
  <button bindtap="add">自增num1</button>
  <button bindtap="add2">自增num2</button>
</view>

// component/test/test.js
Component({
  properties: {
  },
  data: {
    num1:0,
    num2:0,
    sum:0
  },
  methods: {
    add(){
      this.setData({
        num1: this.data.num1 + 1
      })
    },
    add2(){
      this.setData({
        num2: this.data.num2 +1
      })
    }
  },
  // 监听数据
  observers:{
    // 监听多个数据，使用， 分开
    'num1,num2':function(newV1,newV2){
      // console.log("newV",newV1,newV2);
      this.setData({
        sum:newV1 + newV2
      })
    },
    // 监听一个值的时候
    'num1':function(newV1){
      console.log("newV1",newV1);
    }
  }
})

• 效果
  

原生小程序 之 自定义组件的 监听数据 复杂数据对象

• 

父组件

<!--pages/info/info.wxml-->
<view>
  <test></test>
</view>

// pages/info/info.js
Page({
  data: {
  },
})

{
  "usingComponents": {
    "test":"/component/test/test"
  }
}

子组件

<!--component/test/test.wxml-->
<view>
  <view style=" backGround:rgb({{fullColor}});color:#fff">fullColor - {{ fullColor }}  </view>
  <button bindtap="changeR">R</button>
  <button bindtap="changeG">G</button>
  <button bindtap="changeB">B</button>
</view>

  // component/test/test.js
  Component({
    properties: {
    },
    data: {
      rgb:{
        r:0,g:0,b:0
      },
      fullColor:"0,0,0" // 完整的 rgb 数据值
    },
    methods: {
      changeR(){
        this.setData({
          'rgb.r': this.data.rgb.r + 5 > 255 ? 255 :  this.data.rgb.r + 5 
        })
      },
      changeG(){
        this.setData({
          'rgb.g': this.data.rgb.g + 5 > 255 ? 255 :  this.data.rgb.g + 5 
        })
      },
      changeB(){
        this.setData({
          'rgb.b': this.data.rgb.b + 5 > 255 ? 255 :  this.data.rgb.b + 5 
        })
      },
    },
    // 监听数据
    observers:{
      // 监听对象 上的属性值
      // 'rgb.r,rgb.g,rgb.b':function(newV1,newV2,newV3){
      //   this.setData({
      //     fullColor: `${newV1},${newV2},${newV3}` 
      //   })
      // },
      // 监听整个对象
      'rgb.**':function(obj){
        this.setData({
          fullColor: `${obj.r},${obj.g},${obj.b}` 
        })
      },
    }
  })

效果