优雅实现uniapp返回上一页传参

在移动端应用中,表单设置组件往往作为独立的页面层级存在,以实现如时间选择等复杂功能。当用户在该组件页面内选定特定时间后,如何将这一选择结果高效、有序地传递回原页面,成为一个颇具挑战性的任务。尽管可以借助Vuex进行全局状态管理以共享数据,但随着项目规模扩大和业务逻辑复杂化,直接依赖Vuex可能导致数据流难以追踪与维护。我们巧妙地运用uni.$emit事件触发机制,封装了一种方法,旨在实现选择结果的优雅传递,既保持代码的清晰性,又确保了数据流动的可控性。以下是对该方法的实现:

1、封装公共js方法:
复制代码
function generateEmitKey() {
  return `ant${new Date().getTime()}${Math.floor(Math.random() * 150)}`;
}

/**
 * 跳转组件/页面选择数据,并携带数据返回接收处理方法
 * @param {Object} data
 * @returns
 */
function commonBackEvent(data = {}) {
  const { path, query = {}} = data
  if (!path) throw new Error('error: path is not undefined')
  return new Promise((resolve, reject) => {
    try {
      const parameter = query?.parameter || generateEmitKey()
      uni.$off(parameter)
      uni.$on(parameter, data => {
        setTimeout(() => {
          resolve(data)
        }, 500)
      })
      router.push({
        path,
        query: {
          ...query,
          parameter
        }
      });
    } catch (error) {
      reject(error)
    }
  })
}
2、原页面使用该方法进行跳转,并接收数据:
复制代码
const data = await commonBackEvent({
  path: 'xxxxxx',
  query: {
    date,
  }
})
3、组件页面选择时间后返回并emit触发:
复制代码
this.$Router.back();
uni.$emit(this.$Route.query.parameter, 'xxx-xxx-xxx');
相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^4 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端