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')

相关推荐
Fan_web35 分钟前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
冯宝宝^1 小时前
基于mongodb+flask(Python)+vue的实验室器材管理系统
vue.js·python·flask
叫我:松哥1 小时前
基于Python flask的医院管理学院,医生能够增加/删除/修改/删除病人的数据信息,有可视化分析
javascript·后端·python·mysql·信息可视化·flask·bootstrap
平凡シンプル1 小时前
安卓 uniapp跨端开发
android·uni-app
cc蒲公英1 小时前
Vue2+vue-office/excel 实现在线加载Excel文件预览
前端·vue.js·excel
好名字08212 小时前
monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
前端·javascript
森叶2 小时前
Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题
vue.js·electron·npm
c#上位机2 小时前
C#事件的用法
java·javascript·c#
小小竹子2 小时前
前端vue-实现富文本组件
前端·vue.js·富文本
万物得其道者成2 小时前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript