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

需求

公共组件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
相关推荐
游戏开发爱好者811 分钟前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
流***陌3 小时前
宠物寄养美容小程序前端功能解析:贴心照料宠物的全流程支撑
小程序·宠物
小小王app小程序开发6 小时前
任务悬赏小程序深度细分分析:非技术视角下的运营逻辑拆解
大数据·小程序
2501_915918417 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
腾马科技13 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码18 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名21 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风1 天前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者81 天前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone