自定义组件-数据监听器

自定义组件 - 数据监听器

1.什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中，数据监听器的基本语法格式如下：

Comonnent({
	observers:{
		'字段A，字段B': function(字段A的新值,字段B的新值) {
		// do something
		}
	}
})

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

组件的UI结构如下：

<view>{{n1}} + {{n2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini" bindtap="addN2">n2自增</button>

组件的.js文件代码如下:

Component({
	data:{n1:0,n2:0,sum:0},   //数据节点
	methods:{
		addN1(){this.setData({n1:this.data.n1 + 1})},
		addN2(){this.setData({n2:this.data.n2 + 1})}
	},
	observers:{ //数据监听节点
		'n1,n2':function(n1,n2) {           // 监听 n1 和 n2 数据的变化
			this.setData({ sum: n1 + n2 }) // 通过监听器，自动计算 sum 的值
		}
	}
})

3.监听对象属性的变化

数据监听器支持监听队形中单个或多个属性的变化，示例语法如下：

Component({
	observers:{
		'对象.属性A,对象.属性B': function(属性A的新值，属性B的新值) {
			// 触发此监听器的 3 种情况：
			// 【为属性A赋值】使用 setData 设置 this.data.对象.属性A时触发
			// 【为属性B赋值】使用 setData 设置 this.data.对象.属性B时触发
			// 【直接为对象赋值】使用 setData 设置 this.data.对象 时触发
			// do something...
		}
	}
})

案例-点击按钮颜色变换

组件结构

<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值：{{fullColor}}</view>
<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="changeB" type="warn">B</button>

组件样式

.colorBox{
    line-height: 200rpx;
    font-size: 24rpx;
    color: white;
    text-shadow: 0rpx 0rpx 2rpx black;
    text-align: center;
}

组件逻辑

// components/test3/test3.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {},
    /**
     * 组件的初始数据
     */
    data: {
        rgb:{
            r:0,
            g:0,
            b:0
        },
        fullColor:'0,0,0'
    },
    /**
     * 组件的方法列表
     */
    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(newValue1,newValue2,newValue3){
        //     this.setData({
        //         fullColor:newValue1+','+newValue2+','+newValue3
        //     })
        // }
        // 第二种方法直接监听整个对象
        'rgb.**':function(obj){
            this.setData({
                fullColor:`${obj.r},${obj.g},${obj.b}`
            })
        }
    }
})