uni-app项目 使用navigateBack返回上一页并传参 修改前一页面数据

4 篇文章 0 订阅
4 篇文章 0 订阅

uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)

B页面返回修改A页面title的值

//A页面
<template>
    <text class="title">返回修改的值:{{title}}</text>
</template>
export default {
    data() {
        return {
            title: 'Hello'
        }
    },
}
//B页面
<button @click="change">修改上一页的title值</button>

方案一: getCurrentPages()

注:虽然都是通过getCurrentPages,但H5和APP/小程序通过getCurrentPages打印出来的前一页面的结构是不同的。

H5

change(e){
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
    //将前一页的title修改为"Hello World"
    prevPage._data.title =  'Hello World'
    //因为修改的是data里面的绑定数据,所以返回后页面数据会直接显示修改后的
    uni.navigateBack()
}, 

APP/小程序

//B页面
change(e){
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
    //console.log(prevPage ); //按照打印结构这样赋值虽然成功但页面数据不会修改
    // prevPage.data.$root[0].title = 'Hello World'
    prevPage.setData({
        title: 'Hello World'
    })
    uni.navigateBack()
},
//A页面,onShow方法,把setData的数据赋值到当前页面绑定的变量上
onShow(e) {
    let pages = getCurrentPages();
    let currPage = pages[pages.length-1];
    if(currPage.data.title == undefined || currPage.data.title == ''){
		
    }else{
        this.title = currPage.data.title
    }
}, 

方案二:$on监听

//A页面, onShow中添加监听一个handleFun的事件
onShow(){
    uni.$on("handleFun", res => {
        this.title = res.title;
        // 清除监听
        uni.$off('handleFun');
    })
},

//B页面, 返回A页面触发一个事件,使用uni.$emit("handleFun",{})
getAddress(){
    uni.$emit("handleFun",{title: 'Hello World'});
    uni.navigateBack()
}

参考:https://blog.csdn.net/weixin_44433499/article/details/109222663

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值