位置: 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锁定改不了)

  • 运输合同印花税税率
  • 企业对伤残怎么赔偿?
  • 冲红发票怎么写备注
  • 发票备注没写
  • 进项税额抵扣一般多少
  • 必须开具增值税专用发票
  • 开具的红字发票金税三期怎么报税?
  • 物业公司收物业费如何入账
  • 去国外参加展览的英文
  • 没有实收资本是负债吗
  • 因增资扩股导致股价下跌
  • 实报实销电话费
  • 增值税专用发票电子版
  • 含税金是什么意思
  • 国外劳务费用是怎样产生的
  • 国税能代开什么费用的发票?
  • 消防增值服务
  • 三证合一怎么查询
  • 国税电子钥匙常见问题解答
  • 废旧物资销售如何征税
  • 工程会计做账流程及会计分录
  • 事业单位材料费分析怎么写
  • 个体户营业收入超过500万
  • 事业单位的账务
  • 分公司打货款怎么做账
  • 收到折扣发票怎么处理
  • Mac苹果系统怎么转换中文
  • 苹果a1586是什么配置
  • 查账补交以前年度印花税分录
  • 企业所得税纳税调整事项有哪些
  • 车船税怎么计账
  • php system函数的用法
  • 属于资本的是
  • 会计记账的内容
  • 未使用的土地使用权可以摊销吗
  • vscode怎么运行前端
  • vue状态管理有哪些
  • php如何继承多个类
  • php进行批量任务分类
  • nerf 入门
  • 长期待摊费计入哪个科目
  • 上下联的方法
  • wordpress mobile themes
  • python打开文本文档中文读不出来
  • 个体工商户属于灵活就业人员吗
  • 接待客人的场合
  • 长期待摊费用的账务处理
  • 织梦添加文章如何修改高级参数
  • mongodb 随机获取一条数据
  • mongodb添加数据
  • 咨询公司需要交税吗
  • sql server 2005数据迁移
  • 收货和入库的区别
  • 帐外资金
  • 新准则经营租赁 提折旧
  • 废料如何做分录
  • 固定资产出售账面价值计入什么科目
  • 期初固定资产算收入吗
  • 产品的销售费用计入
  • 小规模差额征税申报表怎么填
  • 单利率和复利率公式
  • 企业利润分配的内容
  • 什么企业可以开培训费发票
  • 谈一谈有关阅读的
  • win7 手动输入用户名
  • imac家长控制
  • win7或win8、win8.1系统下安装ubuntu实现双系统图文教程
  • WIN7如何设置屏幕保护密码
  • win10系统admin和oobe
  • cocos怎么用
  • git打标签命令
  • unity获取mesh网格数据
  • javascript折叠菜单
  • ghost详细说明
  • div+css布局是什么
  • 一张监控
  • [置顶]星陨计划
  • JavaScript中的方法名不区分大小写
  • javascript教程
  • 地税局局长权利大吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设