【UniApp】-uni-app-传递数据

前言

  • 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-路由
  • 那么了解完了uni-app-路由之后,这篇文章来给大家介绍一下 uni-app-路由传递数据

路由传参怎么传,是不是可以从 A 页面传递给 B 页面,然后 B 页面再传递给 C 页面, 也可以从 C 页面传递给 B 页面,然后 B 页面再传递给 A 页面(可以顺着传也可以逆着传递)。

注意点:我这里没有使用新建项目,而是使用的是上一篇文章的项目,所以大家可以直接在上一篇文章的项目上进行修改。

步入正题

通过组件跳转传递数据(包含API)

  • 传递

更改 navigate 跳转的路由在后面加上 ? 号,然后在后面加上参数,参数的格式是 key=value,多个参数之间用 & 连接。

<navigator url="/pages/one/one?name=BNTang&age=18" open-type="navigate">
    <button type="default">navigate</button>
</navigator>

这样改写了之后,我们在跳转到 one 页面的时候,就会把 name 和 age 两个参数传递过去。

  • 接收

在 one 页面中,可以在 onLoad 生命周期中进行接收,他会在 onLoad 生命周期中接收到一个参数 options,这个 options 就是我们传递过来的参数,我们可以通过 options.name 和 options.age 来获取到我们传递过来的参数。

<script>
	export default {
		onLoad(option) {
			console.log(option)
		}
	}
</script>

如上的通过组件的方式,我们快速的来过一边通过 API 的方式来传递数据, 代码如下:

<template>
	<view>
        省略...
      
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one?name=LeaderTang&age=18'
				})
			}
		}
	}
</script>

这种方式传递数据是最简单的,除了这种方式,还有其他的方式来传递数据,下面我们来看一下其他的方式。

通过事件通道传递数据(API路由跳转)

打开 UniApp 官方文档:https://uniapp.dcloud.net.cn/api/router.html#navigateto

在 navigateTo 中,有介绍到一个 success 回调函数,这个回调函数是在跳转成功之后执行的,我们可以在这个回调函数中进行传递数据。

<template>
	<view>
      省略...

      <button @click="onJumpOne">navigateTo</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: '通过事件通道传递的数据'
						})
					}
				})
			}
		}
	}
</script>

如上代码在 success 回调函数中,我们通过 res.eventChannel.emit 方法来传递数据,这个方法接收两个参数,第一个参数是一个字符串,这个字符串是我们在接收数据的页面中定义的(两边要一致,自己定义),第二个参数是一个对象,这个对象就是我们要传递的数据。

然后我们在 one 页面中接收数据,代码如下:

<template>
	<view>
		<text>one</text>
	</view>
</template>
<script>
	export default {
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
			})
		}
	}
</script>

如上代码,我们在 onLoad 生命周期中通过 this.getOpenerEventChannel() 方法来获取到事件通道,然后通过 eventChannel.on 方法来接收数据,这个方法接收两个参数,第一个参数是我们在跳转页面中定义的字符串,第二个参数是一个回调函数,这个回调函数中的参数就是我们传递过来的数据。

看了这么多都是从上一个页面传递到下一个页面,那么我们怎么从下一个页面传递到上一个页面呢?这正是我接下来要介绍的内容。

返回上一个页面传递数据

打开 UniApp 官方文档:https://uniapp.dcloud.net.cn/api/router.html#navigateback

返回上一个页面,我们可以通过 navigateBack 方法来实现,这个方法接收一个参数 delta,这个参数是一个数字,表示返回的页面数,如果 delta 是 1,表示返回上一个页面,如果 delta 是 2,表示返回上两个页面,以此类推(堆栈结构)。

我们先来搭建页面,放一个按钮,点击按钮返回上一个页面。

<template>
	<view>
		<text>one</text>
		<text>=======================</text>
		<button type="default" @click="onGoBackClick">返回上一个界面</button>
	</view>
</template>
<script>
	export default {
		methods: {
			onGoBackClick() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

如上代码,我们在点击按钮的时候,调用 navigateBack 方法,传递一个 delta 参数,这个参数是 1,表示返回上一个页面。

那么怎么在返回上一个页面的时候,传递数据呢?我们可以在 onGoBackClick 方法中获取事件通道,然后通过 eventChannel.emit 方法来传递数据,代码如下:

const eventChannel = this.getOpenerEventChannel();
eventChannel.emit("acceptDataFromOpenerPage", {
    data: '通过事件通道返回时传递数据'
})

如上代码,我们在点击按钮的时候,获取事件通道,然后通过 emit 方法来传递数据,这个方法接收两个参数,第一个参数是一个字符串,这个字符串是我们在接收数据的页面中定义的(两边要一致,自己定义),第二个参数是一个对象,这个对象就是我们要传递的数据。

返回时我们传递了数据,那么我们怎么接收数据呢?我们可以在上一个页面中的跳转 API 对象中通过 events 参数, 在 events 定义一个回调函数,这个回调函数的名字必须与返回页面中 emit 方法中的第一个参数一致,然后在这个回调函数中接收数据,代码如下:

events: {
    acceptDataFromOpenerPage(data) {
        console.log(data)
    }
}

  • 测试结果

这种通过事件通道的方式比较通用,不管是从上一个页面传递到下一个页面,还是从下一个页面传递到上一个页面,都可以通过这种方式来传递数据。

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持。

posted @ 2023-12-16 18:58  BNTang  阅读(329)  评论(0编辑  收藏  举报