原生小程序 之 自定义组件 纯数据字段

原生小程序 之 自定义组件 纯数据字段

父组件

<!--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({
    options:{
      // 指定所以 _ 开头的数据字段 为纯数据字段
      pureDataPattern:/^_/
    },
    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}` 
        })
      },
    }
  })