uni-app中,实现页面之间传参

使用场景:

前提条件:当我们从一个列表页面,进入新增页面,

情况1:在新增页面,信息添加成功后,返回列表页面,此时,需要更新列表数据;

情况2:在新增页面,没有添加信息,直接返回列表页面,此时,不需要更新列表数据

针对以上情况,具体实现如下:

列表页面A,代码内容如下:
javascript 复制代码
import { onShow } from '@dcloudio/uni-app'

onShow(() => {
  // 当从添加页面返回时,如果有数据更新,则需要刷新列表
  uni.$on('update', (e: boolean) => {
    // 为true时,表示需要更新数据
    if (e) {
      page.value = 1
      total.value = 0
      getList()
    }
  })
})

添加页面B,代码内容如下:

javascript 复制代码
// 确认添加信息
const confirmSubmit = async () => {
  try {
    btnLoading.value = true
    // 执行对应接口
    await interfaceName(params)
    // 添加成功时,返回列表页面,需要重新刷新数据
    uni.$emit('update', true)
    // 添加成功之后,才返回列表页面
    uni.navigateBack()
  } catch (e) {
    console.log(e)
  } finally {
    btnLoading.value = false
  }
}

注意: 页面之间传参,通过uni.emit('update', params)与uni.on('update', (e: boolean) => {})实现

大家如有其他更好的方法,欢迎大家留言评论。如果有错误的地方,也请大家及时指出,非常感谢!

相关推荐
mldong2 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排3 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60613 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角4 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!4 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰5 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi6 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen7 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马8 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒8 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端