当前位置: 首页 > news >正文

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.titlethis.content = options.contentuni.setNavigationBarTitle({title: options.title})}}
</script>

解决方案3:缓存

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

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

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 第2章 双向链表
  • 网易大数据模型
  • TypeSript9 命名空间namesapce
  • Java集成百度地图API入门指南
  • dbsyncer同步mysql数据
  • SpringMVC基于注解的使用
  • stable diffusion和GAN网络的区别,优点缺点是什么
  • 【计算阶乘求和】计算1!+3!+5!+...+n!/(n+1)!
  • ElasticSearch 的单点部署环境搭建
  • 探索 Linux 内核启动过程
  • 二叉树 - 完全二叉树的节点个数
  • springsecurity 在web中如何获取用户信息(后端/前端)
  • 建筑项目管理软件市场新风向,10款热门软件解析
  • Python3.11使用labelimg
  • Android Activity 的启动模式(Launch Mode)
  • 2017届校招提前批面试回顾
  • ES6之路之模块详解
  • gf框架之分页模块(五) - 自定义分页
  • MySQL-事务管理(基础)
  • PHP那些事儿
  • React中的“虫洞”——Context
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • Vue小说阅读器(仿追书神器)
  • web标准化(下)
  • 浮动相关
  • 爬虫模拟登陆 SegmentFault
  • 盘点那些不知名却常用的 Git 操作
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 使用API自动生成工具优化前端工作流
  • 使用SAX解析XML
  • 在Docker Swarm上部署Apache Storm:第1部分
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • UI设计初学者应该如何入门?
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • ​queue --- 一个同步的队列类​
  • #WEB前端(HTML属性)
  • (2024,Vision-LSTM,ViL,xLSTM,ViT,ViM,双向扫描)xLSTM 作为通用视觉骨干
  • (23)Linux的软硬连接
  • (4)STL算法之比较
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (HAL库版)freeRTOS移植STMF103
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (力扣记录)235. 二叉搜索树的最近公共祖先
  • (七)Flink Watermark
  • (算法)前K大的和
  • (学习日记)2024.03.12:UCOSIII第十四节:时基列表
  • (一)RocketMQ初步认识
  • (转) 深度模型优化性能 调参
  • (转)chrome浏览器收藏夹(书签)的导出与导入
  • ******之网络***——物理***
  • .equals()到底是什么意思?
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
  • .NET 使用 XPath 来读写 XML 文件
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题