位置: IT常识 - 正文

[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案)

编辑:rootadmin

推荐整理分享[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跨域解决方案)

但是  但是  但是 (重点!!!敲黑板)

 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页面的名称都一样   所以数据渲染混乱   这个时候把名字改成对应的就好了,

创作不易   如果对您有帮助 请留下赞再走吧

本文链接地址:https://www.jiuchutong.com/zhishi/297282.html 转载请保留说明!

上一篇:Cursor!!!GPT-4帮我写代码

下一篇:谷歌浏览器被hao123网页(或其他网页)劫持了,怎么办?(已解决)(谷歌浏览器被hao123锁定改不了)

  • 间接税种有哪些
  • 结转固定资产清理的会计科目
  • 原材料加工成产品的会计分录
  • 企业出售不动产的涉税问题
  • 售后维修的配件有哪些
  • 一般纳税人能不能开3个点的专票
  • 金税平台开具增值税发票
  • 房屋出租怎么交税?
  • 金税盘减免税额
  • 委托加工物资的账务处理例题
  • 医院晚上开不开
  • 小规模820如何填写申报表?
  • 房屋修缮发票能补开吗
  • 电子票据查询打印
  • 小规模未开票收入要交增值税吗
  • bois如何设置启动项
  • win10 5月更新已知bug
  • macbookair怎么设置屏幕
  • 股权出资成立公司的条件
  • opware12.exe - opware12进程是什么文件 有什么用
  • 鸟瞰高耸入云的成语
  • php判断查询是否有结果
  • php生成二维码源码
  • 企业所得税具体纳税筹划案例
  • 员工报销的差旅费属于什么科目
  • Linux | 将SpringBoot+Vue项目部署到服务器上
  • 新闻管理系统类图
  • thinkphp5上传文件
  • 其他收益算营业成本吗
  • 年报营业额填多少不纳税
  • phpcms怎么用
  • 货币捐赠会计分录
  • 织梦图集的使用教程
  • 主营业务收入在哪个报表里面
  • 个人所得税专项附加扣除2023
  • 个税跨月更正申报怎么做
  • sql server功能介绍
  • 个人开咨询费 有哪些税
  • mysql中数据类型主要分为哪四种
  • 深入mysql源码
  • 外贸企业出口货物会计分录
  • 固定资产转让损失怎么算
  • 长期应收款计提减值
  • 企业向福利院捐款属于 公共关系
  • 无形资产的相关税费
  • 金税盘税费减免分录
  • 个人开具的收据能税前扣除吗
  • 什么是结账?结账前要做哪些准备工作?
  • 数据库性能优化方法论和最佳实践
  • 忘记windows登陆密码
  • 苹果序列号查询
  • windowsserver2003ftp服务器怎么搭建
  • centos7.4修改主机名
  • pe explorer
  • mac怎么删除应用保留数据
  • ubuntu debian centos
  • os x 10.11 el capitan中文版上手体验评测
  • Linux httpd(apache)启动失败 解决办法
  • win7360安全卫士有必要装吗
  • 怎么更改电脑键盘语言
  • windows 10预览版
  • cocos2dx schedule
  • js object.seal
  • jquery 使用
  • nodejs oom
  • 多个版本python
  • easyui datagrid loader
  • node.js wss
  • unity编译原理
  • for语句的执行过程图解
  • 优化ui界面是啥意思
  • 单例 python
  • js怎么修改
  • css图片渐变效果
  • 对税务领导的批示怎么写
  • 开的发票怎么抽奖
  • 税务局高风险是怎么办
  • 在网上如何查询车辆违章
  • 如何做好税务局长
  • 郑州市国家税务局地址在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设