当前位置:   article > 正文

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

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

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

1、封装公共js方法:
  1. function generateEmitKey() {
  2. return `ant${new Date().getTime()}${Math.floor(Math.random() * 150)}`;
  3. }
  4. /**
  5. * 跳转组件/页面选择数据,并携带数据返回接收处理方法
  6. * @param {Object} data
  7. * @returns
  8. */
  9. function commonBackEvent(data = {}) {
  10. const { path, query = {}} = data
  11. if (!path) throw new Error('error: path is not undefined')
  12. return new Promise((resolve, reject) => {
  13. try {
  14. const parameter = query?.parameter || generateEmitKey()
  15. uni.$off(parameter)
  16. uni.$on(parameter, data => {
  17. setTimeout(() => {
  18. resolve(data)
  19. }, 500)
  20. })
  21. router.push({
  22. path,
  23. query: {
  24. ...query,
  25. parameter
  26. }
  27. });
  28. } catch (error) {
  29. reject(error)
  30. }
  31. })
  32. }
2、原页面使用该方法进行跳转,并接收数据:
  1. const data = await commonBackEvent({
  2. path: 'xxxxxx',
  3. query: {
  4. date,
  5. }
  6. })
3、组件页面选择时间后返回并emit触发:
  1. this.$Router.back();
  2. uni.$emit(this.$Route.query.parameter, 'xxx-xxx-xxx');
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/500805?site
推荐阅读
相关标签
  

闽ICP备14008679号