前言
- 好，经过上个章节的介绍完毕之后，了解了一下 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 页面：
代码语言：html复制<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 页面：
代码语言：html复制<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 页面：
代码语言：html复制<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 页面：
代码语言：html复制<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
- 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
- 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力
我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
