uniapp 页面通信

2023-12-13 18:21:49

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>


文章来源:https://blog.csdn.net/weixin_45152848/article/details/134972665
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。