uniapp 页面通信

o__A_A2023-12-14 10:07

js 复制代码

// 在起始页面跳转到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

js 复制代码

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

Vue3

js 复制代码

// 在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

js 复制代码

<script setup>
let eventChannel = null

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