数据监听器可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持。
有时,在一些数据字段被 setData 设置时,需要执行一些操作。例如, 一个值取决于另外两个值的变化,this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时,可以使用数据监听器进行如下实现。
创建组件cpn-observers
xml
<view class="container">
<view>numberA: {{numberA}}</view>
<view>numberB: {{numberB}}</view>
<view class="btn-flex">
<button class="btn" data-number="A" bind:tap="increment">numberA+</button>
<button class="btn" data-number="A" bind:tap="decrement">numberA-</button>
<button class="btn" data-number="B" bind:tap="increment">numberB+</button>
<button class="btn" data-number="B" bind:tap="decrement">numberB-</button>
</view>
</view>
<view>子组件中根据父组件传递的值求和:{{numberA}} + {{numberB}} = {{sum}}</view>
javascript
Component({
/**
* 组件的初始数据
*/
data: {
numberA: 0,
numberB: 1,
},
lifetimes: {
attached(){
this.setData({
sum: this.properties.numberA + this.properties.numberB
})
}
},
observers: {
'numberA, numberB': function(numberA, numberB) {
// 在 numberA 或者 numberB 被设置时,执行这个函数
this.setData({
sum: numberA + numberB
})
}
},
/**
* 组件的方法列表
*/
methods: {
increment(e){
const {number} = e.currentTarget.dataset
if (number === 'A') {
this.setData({
numberA: this.data.numberA + 1
})
}else if (number === 'B') {
this.setData({
numberB: this.data.numberB + 1
})
}
},
decrement(e){
const {number} = e.currentTarget.dataset
if (number === 'A') {
this.setData({
numberA: this.data.numberA - 1
})
}else if (number === 'B') {
this.setData({
numberB: this.data.numberB - 1
})
}
},
}
})
css
.btn-flex{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.btn{
width: 40% !important;
margin: 10rpx;
}
页面中引用组件
javascript
{
"usingComponents": {
"cpn-observers": "./cpn-observers" //具体路径根据实际位置更改
}
}
xml
<view class="container">
<cpn-observers />
</view>