自定义组件④数据监听器-微信小程序开发(二十一)
1. 什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的
watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下:
Component({
observers:{
'字段A,字段B':function(字段A的新值,字段B的新值){
// do something
}
}
})
2. 数据监听器的基本用法
1)组件的 UI 结构如下:
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini" bindtap="addN2">n2自增</button>
2)组件的 .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
}
})
如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符 ** 来监听对象中所有属性的变化,示例代码如下:
Component({
observers:{
//使用通配符 ** 监听对象上所有属性的变化
'user.**':function(user){
this.setData({
userInfo:`姓名:${user.name},年龄:${user.age}`
})
}
})