uni-app页面传值方法

最新推荐文章于 2025-07-18 15:28:26 发布

原创最新推荐文章于 2025-07-18 15:28:26 发布 · 8.9k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本文介绍了uni-app的两种页面传值方法。一是URL传值，但会暴露参数；二是使用uni.$emit()和uni.$on()进行页面传值，可实现全局通讯。同时指出发送页面和接收页面的注意事项，如发送需先跳转页面、可加定时器，接收页面要销毁上一页面的$emit、加定时器防参数缺失。

一、URL传值

1.直接传一个数字

uni.navigateTo({
	url:'../../pages/page/pay?number=1'
})

2.传一个变量

uni.navigateTo({
	url:'../../pages/page/pay?title=' +this.title+'&name='+this.name
})

URL传值会将参数暴露在URL中，如碰到该需求（传递参数但是不能将参数暴露在URL中）推荐使用以下传值方法

二、使用uni.$emit()和uni.$on() 进行页面传值

uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。

1.发送页面

this.timerId = setTimeout(() => {
	uni.$emit('page', {
		msg: this.msgObj,//对象形式
		actcardInfo: r.data.actcardInfo,
	})
}, 500);

在这里有一个坑需要注意

必须先跳转打开页面,才能发射参数,否则发射无效，接收页面无法接收

其次，如果遇到一次接收无效可能需要发送的时候增加一个定时器，不然接收$on的回调函数可能不执行，所以我在这里加了一个500毫秒的定时器。

注：定时器使用setTimeout（执行一次），setInterval是几秒执行一次容易出问题

2.接收页面

//销毁上一个页面的emit
onUnload() {
	uni.$off('page')
},
onLoad(){
    uni.$on('page',(data)=>{
        this.msgList=(data.msg)
        this.actcardList=(data.actcardInfo)
        //数据缓存
		uni.setStorageSync('activateList', this.activateList)
		uni.setStorageSync('msgList', this.msgList)
    })
    setTimeout(() => {
		// 获取缓存数据
		this.activateList = uni.getStorageSync('activateList')
		this.msgList= uni.getStorageSync('msgList')
        //接口方法
		this.getRechargePolicys()
	}, 800);
}

在接收的页面使用onUnload()+uni.$off()销毁上一个页面的$emit

在接收的页面我用到了数据缓存是为了防止接收页面刷新之后数据消失的情况

在这个为什么用到setTimeout ?

在发送页面说到过要先跳转打开页面才能发射参数，而这里加一个800毫秒的原因就是防止参数还没发射过来时，就已经调用接口导致参数缺失页面发出警报或报错