当前位置: 首页 > 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')


http://www.mrgr.cn/news/5268.html

相关文章:

  • XSS-games
  • Java TCP练习2
  • 【系统架构设计】软件架构设计(1)
  • LeeCode Practice Journal | Day50_Graph01
  • 【STM32】C语言基础补充
  • [mongodb][查询]MongoDb 模糊查询
  • 开闭原则(Open-Closed Principle, OCP)详解
  • RabbitMQ的基础概念介绍
  • dp题目集合
  • Windows Microsoft Edge 浏览器 配置【密码】
  • Python实战:如何使用K-means算法进行餐馆满意度NLP情感分析
  • 【Redis】单线程架构
  • Python知识点:如何使用Flask与AWS Lambda构建无服务器应用
  • 深入解析fs.ReadStream:Node.js中的文件读取流利器
  • spring中事务介绍
  • 得物App白屏优化系列|网络篇
  • 详解Linux命令--netstat
  • 代驾系统源码开发中的用户体验优化:从设计到实现的全方位解析
  • 观测云的安全监控策略:Prometheus 生态的深度集成
  • MySQL中的约束