微信小程序中observer的详解
发表时间:2020-9-29
发布人:葵宇科技
浏览次数:154
概述
observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段
效果
父组件WXML
<view class="container">
<view class="title">Observer数据监听器</view>
<view>父组件向子组件传值</view>
<input class="inp" bindinput='bindInputVal' placeholder="请输入传入num的值"></input>
<view>更改姓名</view>
<input class="inp" bindinput='bindInputName' placeholder="请输入需要更改的姓名"></input>
<observer num="{{num}}" person="{{person}}"></observer>
</view>
父组件JS
//获取应用实例
const app = getApp()
Page({
data: {
num: null,
person: {
name: '秋天的第一口西北风',
age: 20,
sex: '男',
subject: [
{ id: 1, title: '语文', score: 81 },
{ id: 2, title: '数学', score: 92 },
{ id: 3, title: '英语', score: 76 }
]
}
},
// 获取 num 的值
bindInputVal(e) {
this.setData({
num: e.detail.value
})
},
// 修改姓名
bindInputName(e) {
this.setData({
'person.name': e.detail.value
})
}
})
子组件WXML
<view class="container">
<view class="item">
<view class="cont">
<view>父组件传入的num值</view>
<view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">改变后的num值: {{num}}</view>
</view>
<view class="cont">
<view>父组件传入的person对象</view>
<view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">
姓名: {{person.name || '暂无'}},年龄:{{person.age || 0}},性别:{{person.sex || '男'}}
</view>
</view>
<view class="cont">
<view>子组件中单个数据监听</view>
<input class="inp" bindinput='bindInputVal' placeholder="请输入aloneVal的值"/>
<view style="font-size:26rpx;margin: 10rpx 0 0 30rpx;">改变后的aloneVal值:{{aloneVal}}</view>
</view>
<view class="cont">
<view>子组件中多个数据监听</view>
<input class="inp" bindinput='bindInputOneVal' placeholder="请输入oneVal的值"/>
<input class="inp" bindinput='bindInputTwoVal' placeholder="请输入twoVal的值"/>
</view>
</view>
</view>
子组件JS
子组件接收的属性的值如果为 null, undefined, ‘ ’,properties 的 observer 监听不到
Component({
properties:{
num: {
type: String,
observer: function(newVal, oldVal) {
console.log('properties-num', newVal)
}
},
person: {
type: Object,
observer: function(newVal, oldVal) {
console.log('properties-person', newVal)
}
}
},
data: {
aloneVal: 0,
>: null,
twoVal: null
},
observers: {
// 监听全部 setData,每次 setData 都触发,一般用不到 '**' 监听全部
'**' (val) {
console.log('**所有的setData变化:', val) // 此时返回的 val 值是一个包含所有data变量的对象
},
// 监听 properties 接收的值的变化
'num' (val) {
console.log('observers-num', val)
},
// 监听对象
'person' (val) {
console.log('observers-person', val)
},
// 监听对象的属性
'person.name' (val) {
console.log('observers-person.name', val)
},
// 监听子组件中单个数据的变化
'aloneVal' (val) {
console.log('aloneVal', val)
},
// 监听子组件中多个数据的变化
'oneVal, twoVal' (val1, val2) {
console.log('oneVal', val1)
console.log('twoVal', val2)
}
},
// 在组件在视图层布局完成后执行
ready: function() {
},
methods: {
bindInputVal(e) {
this.setData({
aloneVal: e.detail.value
})
},
// 获取>bindInputOneVal(e) {
this.setData({
>: e.detail.value
})
},
// 获取 twoVal 的值
bindInputTwoVal(e) {
this.setData({
twoVal: e.detail.value
})
}
}
})
子组件WXSS
.container {
width: 100%;
}
.item {
width: 100%;
margin-top: 10rpx;
}
.cont {
width: 100%;
padding: 10rpx 30rpx;
box-sizing: border-box;
}
.cont .inp {
margin-top: 10rpx;
border: 1rpx solid #acacac;
border-radius: 30rpx;
padding: 6rpx 32rpx;
}