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

本文主要是介绍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')

这篇关于uniapp中 使用 VUE3 组合式API 怎么接收上一个页面传递的参数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---