自定义组件--数据监听器

1.数据监听器是用来监听和响应任何属性和数据段的变化，从而执行特定的操作。它的作用类似于Vue中的watch监听器。在小程序中，数据监听器的基本语法格式如下：

Component({
    observers:{
    '字段A，字段B'：function（字段A的新值，字段B的新值）{
            //do something
        }
    }
})

2.数据监听器的基本用法

//组件wxml
<button bindtap="addN1">点击N1</button>
<button bindtap="addN2">点击N2</button>
<view>
{{n1}}+{{n2}}={{sum}}
</view>

//组件js文件
methods：{
     addN1(){this.setData({n1:this.data.n1+1})},
        addN2(){this.setData({n2:this.data.n2+1})},
        addSum(){this.setData({sum:this.data.n1+this.data.n2})}//监听器其实效果上等效于这行代码
   
}

  observers:{
        'n1,n2':function(n1,n2){//监听n1和n2的数据变化
            this.setData({
                sum:n1+n2//通过监听器自动计算sum的值
            })
        }

3.数据监听器支持监听对象中单个 或多个属性的变化

Component（{
    observers：{
        '对象.属性A，对象.属性B'：function（属性A的值，属性B的值）-
        //do something
    }
}）

4.案例

//组件js
data{
      rgb:{
            r:0,
            g:0,
            b:0
        },
        fullcolor:'0,0,0'//根据rgb对象的三个属性值，动态计算fullcolor的值
}，


//组件wxml 渲染UI结构
<view style="background-color: rgb({{fullcolor}});" class="colorBox">颜色值：{{fullcolor}}</view>
<button size="mini" type="primary" bindtap="changeR">R</button>
<button size="mini" type="warn" bindtap="changeG">G</button>
<button size="mini" type="default" bindtap="changeB">B</button>


//组件js文件
methods：{
    changeR(){
            this.setData({
                'rgb.r':this.data.rgb.r+5>255? 255: this.data.rgb.r+5
            })
            console.log(this.data.fullcolor)
            console.log(this.data.rgb.r)
        },
        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(r,g,b){
            //为data中的fullcolor重新赋值
            this.setData({
                 fullcolor:`${r},${g},${b}`
            })
}

 5.如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符“**”来监听对象中所有属性的变化

observers：{
     'rgb.**':function(obj){
            //为data中的fullcolor重新赋值
            this.setData({
                 fullcolor:`${obj.r},${obj.g},${obj.b}`
            })
}