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

需求

公共组件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
相关推荐
2501_915106326 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
巨神峰SEO9 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰10 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐11 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐11 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
weixin_lynhgworld14 小时前
剧本杀小程序系统开发:内容生态与商业模式的双轮驱动
大数据·小程序
博客zhu虎康14 小时前
微信小程序报错 ubepected character `的style换行问题
微信小程序
计算机徐师兄14 小时前
Java基于SpringBoot的农场管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·农场管理系统小程序·java农场管理系统小程序·java农场管理系统微信小程序·农场管理微信小程序
00后程序员张14 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
云霄IT15 小时前
新版电脑微信4.1.x.x小程序逆向之——寻找小程序存放位置目录和__APP__.wxapkg
java·微信·小程序