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

news2025/1/11 6:54:19

项目是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>