uniapp--微信小程序页面数据传递

注:此方法只支持跳转页面类型的信息传递

使用uniapp中的 $on 与 $emit 进行页面通讯

       对于微信小程序的开发  我在使用uniapp的 $on 与 $emit 时遇到了数据传递无效、监听不到第一次传递数据等情况,应该是个BUG

解决方法如下

在数据发送页面:

        1.给传递数据的页面按钮添加点击响应事件

         2.在响应事件中使用 uni.$onuni.$emit

                                uni.$emit(eventName,OBJECT)
        触发全局的自定事件。附加参数都会传给监听器回调。

其中eventName为事件名,OBJECT为触发事件附加参数

                               uni.$on(eventName,callback)

        监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数。
其中eventName为事件名,callback为事件

的回调函数。

methods: {    
            sendCard() {
                uni.$on('send', () => {
                    uni.$emit("cardMsg", this.my_card)
                    // 传参 或 传递一个对象 uni.$emit("cardMsg", {})
                    console.log('发送数据');
                })
                //跳转到数据所传递到的页面
                uni.navigateTo({
                    url: "../my_card/my_card"
                })
            }
        }

 在数据接收页面:

         3.在接收页面接收数据

 onReady() {
            uni.$on('cardMsg', (data)=> {
                //我把传过来的数据存到了 data 中
                this.my_card = data
                console.log('接收数据',data);
            })
            uni.$emit('send')
        }

        4.使用 uni.$off 移除监听事件

                             uni.$off([event, callback])

用来移除组件实例上绑定的自定义事件监听器。

该函数有两个参数, event 为指定移除的事件名称,callback 为指定回调函数。

 onUnload() {
            uni.$off('send')
            uni.$off('cardMsg')
        },

当我们没有清除自定义事件,就会在页面离开再进入后就会触发$on,每次离开页面再进入都会添加,所有$emit触发的时候都会多执行一次自定义事件的回调函数。造成不可预料的副作用

         这样 页面间通讯就搞定了 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

find1star

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值