uniapp在使用的过程中,如果有父组件包含了子组件且从子组件返回刷新的情景,那是无法通过再调用父组件的onshow去响应的, 这是由于微信小程序的onshow方法只允许在根目录文件中使用,
let pages = getCurrentPages();
let beforePage = pages[pages.length - 2]
uni.navigateBack({
delta: 1
})
//在这调用父组件间onshow
那么该怎么办呢?尝试了几个小时,有一个曲线办法,
可以通过vuex实现,但是这里项目原因,只用了props通信和watch监听
那么该如何写呢?
首先页面结构
父组件.vue (承载下边组件的页面,不是根组件)
<myMain v-if="show4" :refresh="refresh"></myMain> //注册和父子组件传值
components: {
myMain,
},
data
refresh:false //判断更新
watch:{
refresh:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
// if(newVal==true){
//登录返回
this.refresh=newVal
this.have_hc();
setTimeout(() => {
this.refresh=false //半秒后恢复false 这个不能变一定! 由于我这里退出登录和登录后都需要返回主页面 所以这个需要写,不然只会刷新第一次,
}, 500);
// }
},
deep: true,
immediate: true
}
},
父组件主页.vue(承载这些子组件)
prop:['refresh']接收父组件的更新信息
方法: watch:{
refresh:{
handler(newVal,oldVal){
// console.log(newVal,oldVal);
// if(newVal==true){
this.have_hc(); 调用
// console.log(this.refresh)
// }
}
}
methods:{
have_hc() {
var hc = wx.getStorageSync('loginStorage')
if (hc != '') {
// let pages = getCurrentPages();
// let beforePage = pages[pages.length-1]
this.loginState = true
this.loginInfo = hc;
} else {
this.loginState = false
}
},
}
created{
this.have_hc(); 一开始页面调用 // 下边的是登录返回调用和退出返回调用
}
子组件登录的功能login.vue
这是登录的大概逻辑代码
if (res.data.length == 0) {
uni.$u.toast('密码或账号错误')
} else {
wx.setStorageSync("loginStorage", res.data[0]);
uni.$u.toast('欢迎回家')
setTimeout(() => {
let pages = getCurrentPages();
let beforePage = pages[pages.length - 2]
beforePage.$vm.refresh = true //先判断当前的页面后再找到父页面中的refresh,每个页面不同所以先写到beforePage 打印出来找到父页面的refresh
// console.log(beforePage)
// console.log(beforePage.data.refresh);
// beforePage.have_hc()
uni.navigateBack({
delta: 1
})
}, 500);
子组件退出的功能 quit.vue
quitUser() {
uni.showModal({
title: '注意',
content: '确认退出吗',
success: res => {
if (res.confirm) {
wx.removeStorageSync('loginStorage')
uni.$u.toast('退出成功')
setTimeout(() => {
let pages = getCurrentPages();
let beforePage = pages[pages.length - 2]
beforePage.$vm.refresh = true //设置父页面更新
uni.navigateBack({
delta: 1
})
}, 500);
}
}
})
大概就是这样,主要是用一个watch监听来弥补子组件无法返回调用onshow的办法