前言

好，经过上个章节的介绍完毕之后，了解了一下 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 页面：


	
		one页面
		
	



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

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

index 页面：


	
		
	



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

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

emit(Vue3)

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

one 页面：


	
		one
		=======================
		
	



	function onGoBackClick() {
		uni.navigateBack({
			delta: 1
		});

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

index 页面：


	
		
	



	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")
	})

总结

顺着传递数据

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

逆向传递数据

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

End

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 树莓派硬件PWM的使用方法

最近折腾一个调光显示屏，厂商把调光的编程接口暴露成了PWM，所以就折腾了一下树莓派的PWM输出能力。这里面有一些散落在不同文档中的内容，还有一些不知道从什么文档里查到的东西，归纳在这里，以备后来者之需。树莓派的40 pin通用引脚可以输出PWM信号，用于表示…

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

前言