1.【UniApp】-uni-app概述2.【UniApp】-uni-app全局样式和局部样式3.【UniApp】-uni-app-全局数据和局部数据4.【UniApp】-uni-app-内置组件5.【UniApp】-uni-app-扩展组件6.【UniApp】-uni-app-修改组件主题和样式7.【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期8.【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期9.【UniApp】-uni-app-路由10.【UniApp】-uni-app-传递数据11.【UniApp】-uni-app-CompositionAPI传递数据
12.【UniApp】-uni-app-数据传递补充
13.【UniApp】-uni-app-数据缓存14.【UniApp】-uni-app-pinia存储数据15.【UniApp】-uni-app-网络请求16.【UniApp】-uni-app-自定义组件17.【UniApp】-uni-app-项目实战页面布局(苹果计算器)18.【UniApp】-uni-app-处理项目输入数据(苹果计算器)19.【UniApp】-uni-app-动态计算字体大小(苹果计算器)20.【UniApp】-uni-app-项目计算功能(苹果计算器)21.【UniApp】-uni-app-打包成网页22.【UniApp】-uni-app-打包成小程序23.『UniApp』uni-app-打包成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 页面：
one页面
index 页面：
- 经过如上的这么一番操作之后，我们就可以在控制台中看到我们传递的数据了
emit(Vue3)
- 在 Vue3 中，其实写法大差不差的，只不过在
setup函数中进行编写 - 废话不多说，直接上代码
one 页面：
one
=======================
index 页面：
总结
顺着传递数据
- 通过URL传递数据，然后通过 onLoad 生命周期函数中的 options 参数来接收数据
- 通过 eventChannel.emit 事件通道传递数据，然后通过 eventChannel.on 来接收数据
逆向传递数据
- 通过
uni.$emit传递数据，然后通过uni.$on来接收数据（有一个注意点，就是uni.$on注册的事件一定要在页面卸载的时候通过uni.$off注销掉） - 通过 eventChannel.emit 事件通道传递数据，然后通过 events 参数来接收数据
End
- 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
- 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力
__EOF__
