位置: IT常识 - 正文
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案)
发布时间：2024-01-16推荐整理分享[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uniapp跨平台,uniapp 页面之间传递数据,uniapp跨端,uniapp跨端,uniapp页面间传值,uniapp跨端,uniapp页面间传值,uniapp 跨页面传值,内容如对您有帮助，希望把文章链接给更多的朋友！
uni.$emit 和 uni.$on 是uniapp自带的跨页面传值
vue 父子通讯可以用 props this.$emit 这种简单的父子通讯紧适用于 页面和组件 或者 组件之间的传值，他并不适用于页面和页面的互相传值
那要实现页面通讯呢，我们一起来看看uni.$emit 和 uni.$on的使用方法
示例：
A页面在 onload 中使用 uni.$on('自定义名称',function(data){} 接收 data为接收到的值
B页面在事件中 使用 uni.$emit('自定义名称',{属性名称 : 属性值}) 并搭配使用 uni.navigateBack 跳回A页面 A页面的自定义名称要和B页面的自定义名称相同
代码：
A 页面
// A 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 B 页面传过来的值 )} },}B 页面
// B 页面export default { data(){ return{ listData：[1,2,3,4,5] }; }, methods:{ jump(){ uni.$emit('add',{listData:this.listData}) uni.navigateBack({ delta: 1 }); }, },}这样就实现的页面和页面之间的通讯
![[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案)](https://www.jiuchutong.com/image/20231126/1700985820.jpg)
但是 但是 但是 （重点！！！敲黑板）
uni.$emit 和 uni.$on 都属于全局跨页面传参
所以在A页面 在 onUnload 周期 添加移除监听事件
uni.$off('自定义名称');
// A 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 B 页面传过来的值 )} }, onUnload() { // 移除监听事件 uni.$off('add'); },}以上就解决了uniapp 跨页面传参
下面和大家分享一下 博主在使用uni.$emit 和 uni.$on 遇到的大坑
A页面 和 B 页面同时都 调用了 C页面 并且使用了uni.$on 并且名字是一样的
C页面 返回是方法 使用了 uni.$on 同时也使用了 uni.navigateBack
A页面代码
// A 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 C 页面传过来的值 )} }, onUnload() { // 移除监听事件 uni.$off('add'); }, methods：{ // A 页面 跳转B页面 jumpB(){ uni.navigateTo({ url:'B' }) }, // A 页面 跳转C页面 jumpC(){ uni.navigateTo({ url:'C' }) }, }，}B页面代码
// B 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 C 页面传过来的值 )} }, onUnload() { // 移除监听事件 uni.$off('add'); }, methods：{ // B 页面 跳转C页面 jumpC(){ uni.navigateTo({ url:'C' }) }, }，}C 页面
// C 页面export default { data(){ return{ listData：[1,2,3,4,5] }; }, methods:{ jump(){ uni.$emit('add',{listData:this.listData}) uni.navigateBack({ delta: 1 }); }, },}当A页面跳B页面 B页面跳到C页面 在A页面跳转到B页面然后B页面跳转到C页面 C页面修改完数据之后 AB页面的值都发生了改变
解决方法：AB页面的名称都一样 所以数据渲染混乱 这个时候把名字改成对应的就好了，
创作不易 如果对您有帮助 请留下赞再走吧
下一篇：谷歌浏览器被hao123网页（或其他网页）劫持了，怎么办?（已解决）(谷歌浏览器被hao123锁定改不了)
