uniapp 页面通信

navigateTo

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
   
  url: '/pages/test?id=1',
  events: {
   
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
   
      console.log(data)
    },
    ...
  },
  success: function(res) {
   
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', {
    data: 'data from starter page' })
  }
})

注意：vue3 与 vue 2 被打开页面初始化 略有不同

vue2

onLoad: function(option) {
   
  const eventChannel = this.getOpenerEventChannel();
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
   
    console.log(data)
  })
}

Vue3

// 在test.vue页面，向起始页通过事件传递数据
import {
    onLoad } from '@dcloudio/uni-app'
import {
    getCurrentInstance, ref } from 'vue'
const _this = getCurrentInstance().proxy
onLoad(() => {
   
  let eventChannel = _this.getOpenerEventChannel()
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', (data) => {
   
  	console.log(data)
  })
})

被打开页面，向打开页面传递消息，需要将 eventChannel 缓存，并在对应时刻，调用 eventChannel.emit

<script setup>
let eventChannel = null

onLoad(() => {
   
  // xxx
  eventChannel = _this.getOpenerEventChannel()
})
const submit = () => {
   
  eventChannel.emit('onConfirm', {
   })
  uni.navigateBack()
}
</script>