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

  • 华为mate30如何下载来电铃声(华为Mate30如何下载软件)

    华为mate30如何下载来电铃声(华为Mate30如何下载软件)

  • airpod连接后 还是外放(airpod连接了但是还是外放)

    airpod连接后 还是外放(airpod连接了但是还是外放)

  • 请问华为平板怎么截屏(请问华为平板怎么录屏)

    请问华为平板怎么截屏(请问华为平板怎么录屏)

  • 卡贴机第二次怎么激活(卡贴机第二次怎么激活福射会增加吗)

    卡贴机第二次怎么激活(卡贴机第二次怎么激活福射会增加吗)

  • 什么软件可以抠视频(什么软件可以抠图背景是透明的)

    什么软件可以抠视频(什么软件可以抠图背景是透明的)

  • iPhone11建议升级吗		(iPhone11建议升级16.1吗)

    iPhone11建议升级吗 (iPhone11建议升级16.1吗)

  • 复制图层快捷键ctrl加什么(cad复制图层快捷键)

    复制图层快捷键ctrl加什么(cad复制图层快捷键)

  • 剪映怎么放慢视频其中一部分(剪映怎么放慢视频其中一部分音乐不变)

    剪映怎么放慢视频其中一部分(剪映怎么放慢视频其中一部分音乐不变)

  • 汇编语言是高级语言吗(汇编语言是高级还是低级)

    汇编语言是高级语言吗(汇编语言是高级还是低级)

  • 机顶盒信号中断怎么办(机顶盒信号中断请检查室内线路)

    机顶盒信号中断怎么办(机顶盒信号中断请检查室内线路)

  • 已设置过微信号怎么改(已设置过微信号什么意思)

    已设置过微信号怎么改(已设置过微信号什么意思)

  • 怎么将软件放到桌面(怎么将软件放到开始菜单)

    怎么将软件放到桌面(怎么将软件放到开始菜单)

  • 苹果手机夜拍功能在哪(苹果手机夜拍功能)

    苹果手机夜拍功能在哪(苹果手机夜拍功能)

  • 手机的后台运行在哪设置(oppo手机怎么关闭运行程序)

    手机的后台运行在哪设置(oppo手机怎么关闭运行程序)

  • 快手老是闪退怎么回事(快手老是闪退怎么办啊)

    快手老是闪退怎么回事(快手老是闪退怎么办啊)

  • 计算机clock是什么意思(计算机clock表示什么?)

    计算机clock是什么意思(计算机clock表示什么?)

  • 红米note5屏幕材质(红米note5pro屏幕材质)

    红米note5屏幕材质(红米note5pro屏幕材质)

  • qq红包如何强制退回(qq红包如何强制注销)

    qq红包如何强制退回(qq红包如何强制注销)

  • 暴风影音如何加速播放(暴风影音如何加载字幕)

    暴风影音如何加速播放(暴风影音如何加载字幕)

  • 电话通讯录怎么恢复(电话通讯录怎么删除)

    电话通讯录怎么恢复(电话通讯录怎么删除)

  • Win7浏览器显示“出现了运行时间错误是否调试”(win7浏览器显示证书错误怎么解决)

    Win7浏览器显示“出现了运行时间错误是否调试”(win7浏览器显示证书错误怎么解决)

  • dns.exe是什么进程 dns进程的作用是什么(dns进程)

    dns.exe是什么进程 dns进程的作用是什么(dns进程)

  • Linux中系统参数修改命令sysctl的使用讲解(linux系统参数调优)

    Linux中系统参数修改命令sysctl的使用讲解(linux系统参数调优)

  • 可变现净值相关税费包括消费税吗
  • 进项税额加计抵减5%
  • 收到汇算清缴退回企业所得税分录
  • 计算企业所得税分录
  • 公司取得违约金合法吗
  • 海关缴款通知书在哪里查询
  • 收据盖发票专用章后果
  • 劳务报酬和工资薪金哪个税率高
  • 临时工工资怎么申报个人所得税
  • 劳务发票可以抵扣多少
  • 私营企业实行固定税率
  • 2021年工作绩效未达标扣工资
  • 原材料当废品卖怎么处理
  • 企业安全生产费用提取标准 最新
  • 挂靠人员帮外单位人员缴纳社保如何做账
  • 以前年度的收入怎么调整
  • 水产养殖公司的经营范围_问答
  • 然后销售产品
  • 收的标书收入增值税多少
  • 变更税号后地税个税申报系统还是显示老税号怎么办?
  • 税务会计核算范围
  • 单位卖报纸的钱算什么
  • 职工报销子女医药费
  • 多交企业所得税怎么申请抵缴
  • 预缴附加税款会退税吗
  • 发票金额大于报销金额违法吗
  • 员工伙食费明细表
  • w10引导修复工具
  • 咨询服务费怎么交税
  • 增值税专用发票几个点
  • 水煮鱼的做法和步骤 家常
  • 流转税政策
  • 存货出入库的账务处理
  • thinkphp框架安装
  • React18的useEffect会执行两次
  • 固定资产以前年度未入账怎么处理
  • php中实现文件上传需要用到哪几个函数
  • 图像的生成原理
  • phalcon model在插入或更新时会自动验证非空字段的解决办法
  • php用户登录界面代码
  • javascript保留字有哪些
  • 企业年产值与年收入比例
  • 试运行收入账务处理
  • 长期股权投资的账面价值怎么计算
  • 销售返利的会计分录处理
  • 为什么很多公司选择股票上市
  • 以前年度多计提增值税
  • 投资收益账户属于所有者权益类吗
  • 工商年审中实缴还是虚缴
  • 房租付了没有及时取得发票怎么入账
  • 工会账户收到经费的会计科目
  • 机票退票手续费可以开发票吗
  • 企业所得税必须预缴吗
  • rhel安装mysql
  • ubuntu docker教程
  • 为什么多出一个系统
  • linux命令合集
  • 晨枫U盘启动工具哪个版本好用
  • 电脑xp系统桌面
  • qtaet2s.exe - qtaet2s是什么进程 有什么用
  • win8怎么打开cmd命令窗口?
  • Screen.sleepTimeout=SleepTimeOut.NeverSleep 禁止屏幕锁屏
  • webpack 构建流程
  • cocos2dx-3.1.1 labelttf与label
  • JavaScript中的变量名不区分大小写
  • toggle button什么作用
  • js中math.pow
  • unity3d Hair real time rendering 真实头发实时渲染
  • js 获取图片大小
  • shell脚本 su
  • jquerychange事件
  • 如何用python编写脚本
  • u3d transform
  • javascript怎么用
  • bootstrap快速入门
  • locust框架
  • 小微企业企业所得税是多少?
  • 履职提醒函与督办函区别
  • 征求意见稿 讨论稿 送审稿
  • 湖南省税局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设