需求
公共组件A改变页面B的属性isShow的值。
思路
首先目前我不了解可以直接在组件中改变页面的值的方法,所以我通过监听的方式在B页面监听app.js的某一属性值的改变从而改变B页面的值,众所周知app.js的某一属性值是很容易就能更改的。
app.js
javascript
globalData: {
isShow: false
},//给app.js中被监听的值赋初始值
// 使用数据劫持模式监听数据变化
observe(obj, key, watch, that) {
let val = obj[key];
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set: function (value) {
watch(val, value, that);
val = value;
},
get: function () {
return val;
}
})
}
B页面
javascript
data:{
isShow:false
},
//在onReady中调用app.js的observe,并且传参,第二个参数为要监听的app.js的属性值
onReady() {
const app = getApp()
app.observe(app.globalData, "isShow", this.watch, this);
},
watch(oldVal, newVal, that) {
that.setData({
isShow: newVal//监听后得到新的值,并将新的值赋值给页面的这个我们要改变的这个属性
})
}
A组件
组件中只需要在你需要改变页面值的时候改变一下app.js的所被监听的这个属性的值即可。
javascript
getApp().globalData.isShow = true