微信小程序如何在公共组件中改变某一个页面的属性值

需求

公共组件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
相关推荐
qq_332783541 小时前
wx小程序turf.js判断点是否位于该多边形内部
小程序
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
计算机-秋大田2 小时前
基于微信小程序的养老院管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
钰@5 小时前
小程序开发者工具的network选项卡中有某域名的接口请求,但是在charles中抓不到该接口
运维·服务器·小程序
尚学教辅学习资料5 小时前
基于微信小程序的电商平台+LW示例参考
java·微信小程序·小程序·毕业设计·springboot·电商平台
尘浮生5 小时前
Java项目实战II基于微信小程序的移动学习平台的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
小泽呀x8 小时前
微信小程序中使用离线版阿里云矢量图标
微信小程序·小程序
fakaifa8 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
托马斯-酷涛9 小时前
小程序源码-模版 100多套小程序(附源码)
小程序
小蒜学长11 小时前
springboot基于SpringBoot的企业客户管理系统的设计与实现
java·spring boot·后端·spring·小程序·旅游