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

  • 运行内存是什么意思(运行内存是什么东西)

    运行内存是什么意思(运行内存是什么东西)

  • 快手极速版激活短信发不出去(快手极速版激活老设备)

    快手极速版激活短信发不出去(快手极速版激活老设备)

  • 网上购买的纯流量卡怎么注销(网上购买的纯流量卡怎么激活)

    网上购买的纯流量卡怎么注销(网上购买的纯流量卡怎么激活)

  • 华为p30pro怎么设置永不休眠(华为p30pro怎么设置双卡双待)

    华为p30pro怎么设置永不休眠(华为p30pro怎么设置双卡双待)

  • 戴尔电脑开机重复8声嘟嘟(戴尔电脑开机重装系统按F几?)

    戴尔电脑开机重复8声嘟嘟(戴尔电脑开机重装系统按F几?)

  • b站视频审核需要多久(b站视频审核需要多长时间)

    b站视频审核需要多久(b站视频审核需要多长时间)

  • 无障碍服务怎么打开(无障碍服务怎么使用)

    无障碍服务怎么打开(无障碍服务怎么使用)

  • 戴尔开机自检怎么取消(戴尔开机自检怎么自动打开的)

    戴尔开机自检怎么取消(戴尔开机自检怎么自动打开的)

  • 抖音怎么全屏(抖音怎么全屏无遮挡看图片)

    抖音怎么全屏(抖音怎么全屏无遮挡看图片)

  • 闲鱼商品被保护多久能释放(闲鱼商品被保护是什么意思)

    闲鱼商品被保护多久能释放(闲鱼商品被保护是什么意思)

  • 买二手镜头要注意什么(二手的镜头有什么坑)

    买二手镜头要注意什么(二手的镜头有什么坑)

  • 电话屏幕闪是怎么回事(电话屏闪烁是怎么回事)

    电话屏幕闪是怎么回事(电话屏闪烁是怎么回事)

  • 电脑硬盘可以换到另一台电脑吗(电脑硬盘可以换位置吗)

    电脑硬盘可以换到另一台电脑吗(电脑硬盘可以换位置吗)

  • 一个手机号注册几个抖音账号(一个手机号注册两个微信另一个怎么登陆)

    一个手机号注册几个抖音账号(一个手机号注册两个微信另一个怎么登陆)

  • 笔记本cpu带h是什么意思(笔记本cpu带h好不好)

    笔记本cpu带h是什么意思(笔记本cpu带h好不好)

  • word分页符怎么弄(Word分页符怎么隐藏)

    word分页符怎么弄(Word分页符怎么隐藏)

  • 微信发哪些文字会有特效(微信发哪些文字会有特效2023)

    微信发哪些文字会有特效(微信发哪些文字会有特效2023)

  • 坚果手机是哪个牌子(坚果手机是哪个人的)

    坚果手机是哪个牌子(坚果手机是哪个人的)

  • 抖音互相关注会怎样(抖音互相关注会影响流量吗)

    抖音互相关注会怎样(抖音互相关注会影响流量吗)

  • 苹果11有没有指纹(苹果11有没有指南针)

    苹果11有没有指纹(苹果11有没有指南针)

  • 手机淘宝金币在哪看(手机淘宝金币在哪里查看)

    手机淘宝金币在哪看(手机淘宝金币在哪里查看)

  • ppt怎么调兼容模式(如何设置ppt兼容)

    ppt怎么调兼容模式(如何设置ppt兼容)

  • 电脑存储空间不足怎么办(电脑存储空间不够买什么硬盘)

    电脑存储空间不足怎么办(电脑存储空间不够买什么硬盘)

  • oppok3升降摄像头怎么用(oppok3升降摄像头黑屏)

    oppok3升降摄像头怎么用(oppok3升降摄像头黑屏)

  • 手机号165是什么号段(手机号165是什么卡怎么充值)

    手机号165是什么号段(手机号165是什么卡怎么充值)

  • 怎样使用淘宝口令(淘宝怎么用?)

    怎样使用淘宝口令(淘宝怎么用?)

  • 国内税和国外税
  • 23年一般纳税人税收政策是什么
  • 土地增值税清算的条件
  • 农产品进项税额计算扣除的方法
  • 增值税缴纳的罚款怎么算
  • 事业单位代扣社保公积金分录怎么写的
  • 技术研发阶段的费用如何做分录
  • 企业所得税研发费用100%扣除的有哪些企业
  • 增值税税控盘服务费可以每年都抵扣吗
  • 处置的固定资产
  • 店面转让出去收到的钱如何做账?
  • 个体工商户变更法人
  • 1697506445
  • 预缴所得税多交了汇算时可以抵扣下一年的所得税吗
  • 哪些费用可以做研发费用
  • 联想lenovo ideapad 320-15AST
  • 员工出差时法律规定
  • 关于商品退换
  • 虚增成本调增还会被处罚吗
  • 半成品加工费计入什么科目
  • 没有签订劳动合同上班期间受伤怎么赔偿
  • 红字专用发票是红色的吗
  • 公司资质办理费用
  • 向国外个人支付的佣金是否缴纳个人所得税
  • 股东以非货币出资办理什么手续
  • php ajax 实现
  • 昆明紫霞宫的46 道拐
  • 深度学习中正样本、负样本、简单样本、困难样本的区别 (简单易懂)
  • 常用php数组排序方法
  • 现金盘盈盘亏怎么处理
  • 可行性研究报告合同属于什么合同
  • 所得税汇算清缴报告在哪查
  • 本月没有销项只有进项 还认证发票吗
  • 合并范围外关联方需要函证吗
  • 无形资产收益额的具体测算方法有
  • 怎么盘存货
  • 其他权益工具投资公允价值变动怎么计算
  • 长期借款的会计分录怎么写
  • 企业资金管理是什么意思
  • 待报解预算收入是什么意思,扣了钱
  • 每月随工资扣的房费缴纳个税吗怎么算
  • 2021年废铁回收
  • 房地产企业销售房屋印花税税率
  • 软件公司会计科目
  • 违约金 专票
  • 公司餐费怎么入账
  • 实收资本印花税税率多少
  • 小规模纳税人减按1%政策
  • 行政单位年结
  • 为什么说进项和销项是相对的
  • 预付账款和预收账款怎么区分
  • 会计账簿的作用之一是编报和输出会计信息
  • 工业企业进项税和销项税均为17%
  • 当你感觉到你的win2000运行速度明显减慢
  • Fedora25踏上Wayland的路上讲解
  • windows性能监视器横坐标
  • window10桌面有白色框
  • iTunesHelper.exe是什么进程?iTunesHelper.exe系统错误怎么解决?
  • win8系统的电脑
  • win7系统开启无线服务
  • xp的命令提示符在哪
  • linux修改服务器ip地址
  • perfom.exe
  • win7系统桌面右键没有个性化
  • win7系统无法开机解决方法
  • win10英文版系统怎么完全改为中文
  • xml文件网络传输
  • [置顶]游戏名 TentacleLocker
  • androidstudio git
  • 批处理/a
  • 文件夹权限命令
  • jquery鼠标点击
  • js 模块 modules
  • 动态页面设计
  • 安卓圆角矩形图标
  • python读取一个文件并写入另一个文件
  • javascript的介绍
  • 中国纳税大户排行
  • 车辆购置税非本人可以代缴吗
  • 郑州高新税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设