uniapp 页面跳转通信上下级页面互传

第一种

//A页面跳转方法
xx(){
	uni.navigateTo({
		url: './olylis-cascader/demo'
	});
},
//A页面 用来回去B页面返回数据的方法
getValue(list){
	console.log(list,'B页面传递的数据')
}
----------------------------------------------------------
B页面
submit(){
	let pages = getCurrentPages()
	// 2. 上一页面实例
	// 注意是length长度,所以要想得到上一页面的实例需要 -2
	// 若要返回上上页面的实例就 -3,以此类推
	let prevPage = pages[pages.length - 2]
	// 3. 给上一页面实例绑定getValue()方法和参数(注意是$vm)
	// getValue是调用上个页面接收的方法
	prevPage.$vm.getValue(this.id)
	// 4. 返回上一页面
	uni.navigateBack({
		delta: 1 // 返回的页面数
	})
}

第二种

可指定页面跳转,跨级

//A页面 一个方法 发送/接收
insParticulars(){
	var _this = this; // 这里一定要注意, this失效
	uni.navigateTo({
		url: './particulars', //跳转指定页面
		events: {
			acceptDataFromOpenedPage: (data)=> { // B页面返回的对象
				console.log('....',data)
			},
		},
		success: (res) =>{ //发送的对象,res不用管 下面这个是固定方法,可以传一个对象
			res.eventChannel.emit('acceptDataFromOpenerPage', { 'isIns': true})
		}
	})
	
},
--------------------------------------------------------------
//B页面
//一进来接收数据
onLoad() { //注意这是onLoad 里面
	var _this = this; // 注意this失效
	// 此处声明只是为了显示看起来简洁一点
	  const eventChannel = this.getOpenerEventChannel();
	  // 接收上个页面传递的数据
	  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
	  eventChannel.on('acceptDataFromOpenerPage', function(data) {
	    // 对数据做处理
		console.log(data.datalist)
	  })
},
//B页面的提交数据 返回
submit() {
	const eventChannel = this.getOpenerEventChannel();
	// 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
	eventChannel.emit('acceptDataFromOpenedPage', {data: 'xxx返回'});
	// 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
	uni.navigateBack({
	   delta: 1
	});	
},

相关推荐

  1. uniapp 页面通信上下级页面

    2024-04-22 14:56:03       34 阅读
  2. uniapp怎么进行页面

    2024-04-22 14:56:03       26 阅读
  3. uniapp锚点点击-页面

    2024-04-22 14:56:03       17 阅读
  4. [Flutter]页面

    2024-04-22 14:56:03       31 阅读
  5. uniapp页面如何传递及接收对象参数?

    2024-04-22 14:56:03       60 阅读
  6. UniApp登录后如何实现页面

    2024-04-22 14:56:03       64 阅读
  7. uniapp 安卓到应用设置等页面

    2024-04-22 14:56:03       48 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-22 14:56:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-22 14:56:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-22 14:56:03       82 阅读
  4. Python语言-面向对象

    2024-04-22 14:56:03       91 阅读

热门阅读

  1. 一文了解什么是RESTful风格

    2024-04-22 14:56:03       32 阅读
  2. SQL Server详细使用教程

    2024-04-22 14:56:03       39 阅读
  3. js实现快速拖拽(定时器版本)

    2024-04-22 14:56:03       34 阅读
  4. Flink CDC 整库 / 多表同步至 Kafka 方案(附源码)

    2024-04-22 14:56:03       31 阅读
  5. 从事数据分析相关工作技术总结

    2024-04-22 14:56:03       28 阅读
  6. FFT快速傅里叶变换音频分析

    2024-04-22 14:56:03       44 阅读
  7. 基于单片机雨天自动关窗器的设计

    2024-04-22 14:56:03       35 阅读
  8. 基础矩阵和本质矩阵

    2024-04-22 14:56:03       39 阅读
  9. 水气表CJ/T188协议学习及实例

    2024-04-22 14:56:03       32 阅读
  10. 基于springboot的教学资源库源码数据库

    2024-04-22 14:56:03       34 阅读
  11. flink mysql数据表同步SQL CDC

    2024-04-22 14:56:03       36 阅读
  12. 【QT进阶】Qt http编程之json解析的简单介绍

    2024-04-22 14:56:03       42 阅读