uniapp返回上一个页面，携带参数

原创已于 2024-06-25 10:32:33 修改 · 3.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-03-25 11:31:39 首次发布

uniapp 专栏收录该内容

11 篇文章

订阅专栏

在uni-app开发中，文章介绍了如何通过getCurrentPages获取上一页面实例并传递参数，以及使用uni.$emit和uni.$on进行事件通信。但遇到的问题是接收端函数可能会被重复执行，这可能导致程序错误。解决方案在于正确管理和清理事件监听器，以防止多次触发。

1.推荐方法

传递页面


   // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
     let pages = getCurrentPages() 
     
     // 2. 上一页面实例
         // 想要得到上一页面的实例需要 -2
         // 返回上上页面的实例就 -3，以此类推
     let prevPage = pages[pages.length -2] 
     
     // 3. 给上一页面实例绑定getUser()方法和参数（注意是$vm）
     prevPage.$vm.getUser(this.data) 
     
     // 4. 返回上一页面
     uni.navigateBack({
         delta: 1 // 返回的页面数
     })

接收页面，返回的页面


getUser(data){
    console.log('接收到的参数',data)
}

2.emit传递 on 接收

问题：接收时会重复接收，即函数会执行多次。很多情景下会出问题。

可能是因为页面有缓存，返回上一个页面，那些缓存的页面如果也有$on方法都会被触发。

传递页面


uni.$emit('getuser', this.userListAdd22)

uni.navigateBack({
    option: 1,
 });

接收页面，返回的页面


onShow() {
        uni.$on('getuser',function(data){
          console.log('监听到事件来自返回的参数：' , data);
        })
 },