uniapp中 使用 VUE3 组合式API 怎么接收上一个页面传递的参数

项目是uniapp ,使用了vue3 vite

复制代码
// 使用的组合式API 的 语法糖  
<script setup>  
   // 无法使用 onLoad   
<script>

使用不了下面方法获得上一个页面参数传递

onLoad(options){

}

解决方案1(亲测Ok):消息通知与监听

使用Eventbus方法,消息传递:$emit

A页面跳转

复制代码
function toFinancePage() {
  uni.switchTab({url: `/pages/work?companyId=${currentFactory.value.COMPANY_ID}`,
  success:()=>{
    console.log('跳转成功')
    uni.$emit('companyid',currentFactory.value.COMPANY_ID)
  }})
}

B页面setup里,onActivated里接收消息,然后在页面离开时onDeactivated时及时取消监听,

不执行off话,每次进来都会添加一个监听(全局的),会重复执行on的事件回调。

复制代码
<script setup>
import {ref, onMounted, watch, onUpdated, onActivated, nextTick,onDeactivated} from "vue";
onActivated(() => {
  console.log(`on activated>>>>.`)
  uni.$on('companyid',
      (result) => {
        nextTick()
        console.log(`收到${result}`)

      })
})

onDeactivated(() => {
  uni.$off()
})
</script>

效果监听收到参数:公司编号

解决方案2:export default{}

不用使用组合式API,改回vue2的写法,export default{}

复制代码
<script>
  export default {
    data() {
      return {
        title: '',
        content: ''
      }
    },
    onLoad(options) {
      this.title = options.title
      this.content = options.content
      uni.setNavigationBarTitle({
        title: options.title
      })
    }
  }
</script>
解决方案3:缓存

比较原始的方法,通过本地缓存

A页面: uni.setStorageSync('companyid','1800')

B页面: uni.getStorageSync('companyid')

相关推荐
计算机学姐13 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
游戏开发爱好者814 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
哆啦A梦158817 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长18 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH18 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据19 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年19 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una20 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年21 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js21 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发