方式一:标签跳转
 

<navigator :url=" './nav?index='+navData">点击传递参数</navigator>


方式二:url跳转 

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'//可进行字符串拼接
});


//在test.vue页面接受参数

//在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}


如果传递的数据为对象:则需要把对象转成字符串,新页面接收后把字符串解析为对象

var mynavData = JSON.stringify(that.navData); // 这里转换成 字符串
uni.navigateTo({
    url:'./nav?index='+mynavData
})

//新页面接收后:
onLoad(option) {
    var data = JSON.parse(option.index); // 字符串转对象
    console.log(data)
}


方式三:使用混入的方法传参
 

<jfSuccess ref="jfS" @submit="openUrl('/pages/competition/perfectInformation/perfectInformation?competitionId=' + competitionId);"></jfSuccess>


方式四:使用uni.$emit和uni.$on页面通讯

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

//监听全局的自定义事件,事件由 uni.$emit 触发,回调函数会接收事件触发函数的传入参数。
uni.$on(eventName,callback)

//移除全局自定义事件监听器。
uni.$off([eventName, callback])


 
 

//在子页面定义事件传参
uni.$emit('update',{msg:'页面更新'})
 
//在父页面接受参数
export default {
    onLoad: function () { 
        uni.$on('update',function(data){
        	console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
    	})
    }
}

参考链接

https://blog.csdn.net/qq_59125846/article/details/131737377

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐