uni-app 一个自定义组件被多个页面引用并传值的坑

在uni-app中开发微信小程序时遇到自定义组件在多个页面共享并传值的问题。通过getBackgroundAudioManager封装在main.js中全局使用,尝试利用vuex管理和页面生命周期方法如onLoad、mounted、onShow进行参数传递。最终解决方法是利用onShow事件和子组件的$emit进行双向通信,确保音乐播放状态在不同页面的一致性。
摘要由CSDN通过智能技术生成

因为自已要学着做个uniapp项目,我用vue2搞一个音乐微信小程序,在搞到传值的时候给我整不会了,我以为简单的绑定一下要动态改变的属性,然后就通过更新变量就能动态改变属性了,没想到搞了半天才搞明白,我搞的是绑定src

<image @click="music" class="music_right_img" :src="music_static==true?'/static/my/stop.png':'/static/my/play.png'"></image>

因为是音乐小程序所以我有个自定义的音乐播放栏,就先搞了两个页面,两个页面都放进了uniapp的原生tabbar里面,然后点击这个音乐播放栏进入音乐播放界面,这个点击事件我是用navigateTo直接跳到音乐播放界面的,然后用navigateBack返回上一级页面,很合理对吧。

然后,我每个页面都要有个判断当前音乐播放状态的变量吧,关键是直接我直接调用对象然后获取音乐状态复制后发现这个赋值有时候在my页面有用,有时候又在index有用,就是不能一起生效。

想起来了,微信小程序的组件在不同页面被同一个组件引用时的值并不是通用的,我想uniapp应该微信小程序开发的话也应该有所相同,就想通过父组件(也就是当前页面)向子组件(子组件就是引用的组件)传参来更改,这样即便值不相同,每次传的值是一样的也就没什么不同了

我用的是getBackgroundAudioManager,直接封装在main.js然后就可以在全局vue使用)

// #ifndef VUE3
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值