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