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監聽

https://uniapp.dcloud.io/api/window/communication

//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()
}

方案三:緩存值的方式


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM