uni-app页面回跳传参

实现场景

A页面跳转到B页面,然后把参数返回给A页面

官方API

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

// uni.navigateTo 目标页面 pages/test.vue
onLoad: function(option) {
  console.log(option.query)
  // #ifdef APP-NVUE
  const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
  // #endif
  // #ifndef APP-NVUE
  const eventChannel = this.getOpenerEventChannel();
  // #endif
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
  eventChannel.emit('someEvent', {data: 'test'});
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

实例

A页面

<view @click="toAdd">跳转</view>
    methods: {
	toAdd(){
		uni.navigateTo({
		url: '/index/index', //B页面路由
		events: {
			// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
			acceptDataFromOpenedPage: function(data) {
			console.log(data,'acceptDataFromOpenedPage')
		},
		someEvent: function(data) {
		console.log(data,'someEvent')
		}
	},
	success: function(res) {
		// 通过eventChannel向被打开页面传送数据
		// res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
		}
	})
,

B页面

<view @click="toAddB(id)">跳转</view>
methods: {
	nav(id){
		const eventChannel = this.getOpenerEventChannel();
		console.log(eventChannel,'eventChannel ')
		eventChannel.emit('acceptDataFromOpenedPage', {data: id});
		eventChannel.emit('someEvent', {data: id});
		uni.navigateBack({
			
		})
	}
}
posted @ 2021-09-30 17:09  会飞的小白  阅读(394)  评论(0编辑  收藏  举报