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

前言

• 好，经过上个章节的介绍完毕之后，了解了一下 uni-app-CompositionAPI传递数据
• 那么了解完了uni-app-CompositionAPI传递数据之后，这篇文章来给大家介绍一下 uni-app-数据传递补充（也就是在补充一点内容给到大家）
• 先主要介绍逆向传递数据，逆向传递数据除了使用事件通道之外，还可以通过 uni.$emit 的方式来进行传递数据，这种方式也是非常的简单
• 先来简单的搭建一个演示环境，然后来进行介绍
• 分别从 Vue2 与 Vue3 进行介绍

搭建演示环境

创建一个全新的项目(先来看 Vue2 版本的，所以在创建项目的时候选择 Vue2)：

然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可。

• 经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境
• 接下来就可以开始进行介绍 uni-app-数据传递补充内容了

步入正题

emit(Vue2)

• 项目创建好了，我们现在需要分别创建对应的页面，分别是 one 与 index 页面
• 在 one 页面中创建一个按钮，点击按钮之后跳转到 index 页面，然后在 index 页面中创建一个按钮，点击按钮之后跳转到 one 页面
• 在 one 返回按钮的函数中，通过 uni.$emit 的方式来传递数据，然后在 index 页面中通过 uni.$on 来接收数据
• 在 index 页面中除了通过 uni.$on 来接收数据之外，还需要在 onUnload 生命周期函数中通过 uni.$off 来取消监听
• 反正你要记住监听了方法那么就一定要取消监听，不然会造成内存泄漏的问题

one 页面：

<template>
	<view>
		<text>one页面</text>
		<button type="primary" @click="onGoBackClick">返回到上一页</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			onGoBackClick() {
				uni.navigateBack({
					delta: 1
				});

				// 通过 $emit 传递数据
				uni.$emit("test", {
					data: "通过$emit直接传递数据"
				})
			}
		}
	}
</script>

index 页面：

<template>
	<view>
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>

<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one'
				})
			}
		},
		onLoad() {
			uni.$on("test", (data) => {
				console.log(data)
			})
		},
		onUnload() {
			uni.$off("test")
		}
	}
</script>

• 经过如上的这么一番操作之后，我们就可以在控制台中看到我们传递的数据了

emit(Vue3)

• 在 Vue3 中，其实写法大差不差的，只不过在 setup 函数中进行编写
• 废话不多说，直接上代码

one 页面：

<template>
	<view>
		<text>one</text>
		<text>=======================</text>
		<button type="default" @click="onGoBackClick">返回上一个界面</button>
	</view>
</template>

<script setup>
	function onGoBackClick() {
		uni.navigateBack({
			delta: 1
		});

		// 通过 $emit 传递数据
		uni.$emit("test", {
			data: "通过$emit直接传递数据"
		})
	}
</script>

index 页面：

<template>
	<view>
		<button type="primary" @click="onJumpOne">跳转到One界面</button>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	function onJumpOne() {
		uni.navigateTo({
			url: '/pages/one/one'
		})
	}

	onLoad(() => {
		uni.$on("test", (data) => {
			console.log(data)
		})
	})

	onUnload(() => {
		uni.$off("test")
	})
</script>

总结

顺着传递数据

• 通过URL传递数据，然后通过 onLoad 生命周期函数中的 options 参数来接收数据
• 通过 eventChannel.emit 事件通道传递数据，然后通过 eventChannel.on 来接收数据

逆向传递数据

• 通过 uni.$emit 传递数据，然后通过 uni.$on 来接收数据（有一个注意点，就是 uni.$on 注册的事件一定要在页面卸载的时候通过 uni.$off 注销掉）
• 通过 eventChannel.emit 事件通道传递数据，然后通过 events 参数来接收数据

End

• 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
• 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力