uniapp 页面跳转 详细(如何传递对象)页面之间如何传值$emit, $on 时机。还有对应的新写法

1. 常用方式
uni.navigateTo({
    
    
	url:'/pages/index/test', //建议这么写
})
//或者
<navigator url="/pages/index/test" animation-type="pop-in">跳转</navigator>
2.情况1. 在当前页面跳转到test页面的时候 我希望传递一些参数
	uni.navigateTo({
    
    
		url:`/pages/index/test?id=${
      
      this.id}&name=${
      
      this.name}`, //建议这么写
	})
	test页面
	export default{
    
    
		onload(params){
    
    
			// 参数就过来了
		}
	}
 情况2. 在当前页面跳转到test页面的时候 我希望传递一个对象,明显你现在不能拼接了 你可能会想
 	uni.$emit('事件名称',object) 
 	// 这不就好了么? 这种方式 适合当前页面被打开过一次,因为你需要
 	// 在mounted 里面接受, 我这个页面都没渲染过,我怎么接受??
 	// 正确方式
 	jumpTo(){
    
    
 		 // 我们发的值一般是都是data区域的
		uni.navigateTo({
    
    
			url:`/pages/index/test`, //建议这么写
			// 版本2.8.9+ 支持
			success:(res)=>{
    
    
				// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
				res.eventChannel.emit('sendTestValue',{
    
    
						info:this.info
				})
			}
		})
	}
	test.vue 中 怎么接受呢
	onload(){
    
    
		// 别问我啥意思。这是官方文档提供的
		this.page = this.getOpenerEventChannel();
		// 你可以在这里直接接受,这里不是$on
		this.page.on('sendTestValue',(data)=>{
    
    
			// 这是data 就是上个页面传递的对象了
		})
	}
	情况3. test 是一个页面并不是一个组件,对吧?但是我希望, 在这个页面操作一些东西之后
	// 将操作后的值,发送给上个页面,这时候uni.$emit 就可以了, 还有简单写法,别急往下看
	methos:{
    
    
				// 假如说是这样的
			 sendBeforPage(){
    
    
				// 但是这种方式 不好
			 	uni.$emit('send',123);
			 },
			 // 这样写法,这个页面按钮点击之后
			 还记得 this.page吗?
			 sendBeforPage(){
    
    
			 	 this.page.emit('send',123)
			}	 
	} 
	// 那上个页面怎么接受?
	还记的uni.navigateTo吗?  // 你没看错就是在这里
	methos:{
    
    
			jumpTo() {
    
    
				uni.navigateTo({
    
    
					url: "/pages/index/test",
					events: {
    
    
						// 当你在test.vue将按钮点击的时候,这里就已经可以拿到值了
						send(data) {
    
    
							this.shareData = data;
						},
					}
				})
			}
	}

猜你喜欢

转载自blog.csdn.net/weixin_45932463/article/details/120939482