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

  • 支付宝怎么查询疫苗批号(支付宝怎么查询婚姻状况)

    支付宝怎么查询疫苗批号(支付宝怎么查询婚姻状况)

  • 荣耀x10max如何截屏(华为荣耀x10max怎么截图)

    荣耀x10max如何截屏(华为荣耀x10max怎么截图)

  • windows media player可以倍速播放吗(windows media player支持mp4吗)

    windows media player可以倍速播放吗(windows media player支持mp4吗)

  • 手机qq隐身会被发现吗(手机qq隐身会被看到吗)

    手机qq隐身会被发现吗(手机qq隐身会被看到吗)

  • 淘宝可以开夜间模式吗(淘宝开夜间模式)

    淘宝可以开夜间模式吗(淘宝开夜间模式)

  • 华为荣耀手环6发布时间(华为荣耀手环6价格)

    华为荣耀手环6发布时间(华为荣耀手环6价格)

  • 华为手机怎么改微信号(华为手机怎么改密码锁屏)

    华为手机怎么改微信号(华为手机怎么改密码锁屏)

  • microsoft edge是ie吗

    microsoft edge是ie吗

  • 微信朋友圈怎么看访客记录(微信朋友圈怎么定位到别的城市)

    微信朋友圈怎么看访客记录(微信朋友圈怎么定位到别的城市)

  • 苹果手机有无线投屏吗(苹果手机有无线遥控功能吗)

    苹果手机有无线投屏吗(苹果手机有无线遥控功能吗)

  • 苹果手机滑不动怎么办(苹果手机滑不动了!打不开什么原因)

    苹果手机滑不动怎么办(苹果手机滑不动了!打不开什么原因)

  • 华为手表gt2收不到微信(华为手表gt2收不到消息推送)

    华为手表gt2收不到微信(华为手表gt2收不到消息推送)

  • 苹果x几个卡槽(苹果14pro只有一个卡槽吗)

    苹果x几个卡槽(苹果14pro只有一个卡槽吗)

  • 快手怎么能一天关注40票(快手一天能双击多少次)

    快手怎么能一天关注40票(快手一天能双击多少次)

  • 账号查找是什么意思(账号查找有什么区别)

    账号查找是什么意思(账号查找有什么区别)

  • 抖音如何发图片评论(抖音如何发图片配自己的语音)

    抖音如何发图片评论(抖音如何发图片配自己的语音)

  • 显卡的显存大小有什么作用(显卡的显存大小4GB)

    显卡的显存大小有什么作用(显卡的显存大小4GB)

  • 华为安卓10.0怎么升级(华为安卓10升级后体验)

    华为安卓10.0怎么升级(华为安卓10升级后体验)

  • 华为畅享10系列什么时候上新(华为畅享10系列手机壳)

    华为畅享10系列什么时候上新(华为畅享10系列手机壳)

  • 微信付款明细怎么查询(微信付款明细怎么导出来)

    微信付款明细怎么查询(微信付款明细怎么导出来)

  • vue怎么添加文字(vue给对象增加字段)

    vue怎么添加文字(vue给对象增加字段)

  • vivo手机有个月亮标志(vivo手机有个月牙行的东西在哪里)

    vivo手机有个月亮标志(vivo手机有个月牙行的东西在哪里)

  • 拼多多免拼卡怎么使用(拼多多免拼卡怎么弄)

    拼多多免拼卡怎么使用(拼多多免拼卡怎么弄)

  • 打电话的图标没了怎么办(打电话的图标没有了)

    打电话的图标没了怎么办(打电话的图标没有了)

  • 安卓手机怎么外接u盘(安卓手机怎么外网)

    安卓手机怎么外接u盘(安卓手机怎么外网)

  • ipad如何修改id密码(ipad怎么修改apple id密码)

    ipad如何修改id密码(ipad怎么修改apple id密码)

  • vivoiqoo如何分屏(vivoiqoo5分屏)

    vivoiqoo如何分屏(vivoiqoo5分屏)

  • rtx3090ti推出时间(rtx3090 rtx titan)

    rtx3090ti推出时间(rtx3090 rtx titan)

  • 预防CPU被烧毁的几项基本措施(预防cpu被烧毁的办法)

    预防CPU被烧毁的几项基本措施(预防cpu被烧毁的办法)

  • 如何在python中建立pyqt5网格布局(python怎么创建)

    如何在python中建立pyqt5网格布局(python怎么创建)

  • 小型微利企业认定标准最新
  • 税务局代个人开票
  • 合并两公司的帐务怎么做
  • 企业股权转让影响利润吗
  • 贸易类公司做产品代理账务如何处理
  • 别墅一般送车库吗
  • 分公司独立核算和非独立核算区别
  • 非货币性资产对外投资
  • 出差票据应该如何记账
  • 专票抵扣是税额吗
  • 关于土地增值税若干问题的通知
  • 投资协议需要注意细节
  • 罚没支出包括税收滞纳金吗
  • 个人所得税加计扣除有哪些项目
  • 购销合同印花税计税依据
  • 减免税款未抵扣增值税
  • 废旧物资回收企业税收管理
  • 印花税不足1元 需要计提吗
  • 非货币性资产交换和债务重组的区别
  • win10的病毒隔离有用吗
  • vue打包速度优化
  • 其他业务收入和其他业务成本区别
  • aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询
  • 专利权的期限是指专利权的实际有效期限
  • 什么是会计分录其一般表达形式是怎样的
  • php获取文件名
  • php that
  • php session_start
  • 开办费对应的现金流量项目
  • 葡萄牙海岸风光
  • thinkphp with
  • 免税企业税金及附加计算
  • yolo行人检测
  • 手写发票可以报税吗
  • 共管账户和联名账户
  • html5简单吗
  • 使用二氧化碳灭火器时人应该站在什么位置
  • es6对象扩展运算符
  • php实现定时器
  • 商贸公司用什么名字最好
  • 利润分配的顺序依次是什么
  • spring boot dao
  • sqlserver连接不到本地服务器
  • 健身房注册公司能注册医疗吗?
  • 税务异常怎么处理要多长时间
  • 资本公积含义
  • 固定资产是怎么管理的
  • 记账凭证核算处理方法
  • 无形资产达到可使用状态前如何入账
  • 商业承兑汇票怎么贴现
  • 投资性房地产用三栏式吗
  • 小规模纳税人开专票需要交税吗
  • 教育费返还款计入收入吗
  • 自产委托加工的货物用于非增值税应税项目
  • 应收账款多收了退回怎么做账
  • 建筑行业总产值占我国GDP的比重
  • 银行对账单和银行流水的区别
  • 公司借款流程
  • 新组建的公司该怎样开展工作
  • sql的常用函数
  • 电脑windows怎么查
  • linux操作系统查询命令
  • mac的itunes怎么下载歌曲
  • ubuntu如何启动
  • linux中使用fdisk命令进行硬盘分区
  • win7系统的话筒在哪设置
  • hdaudpropshortcut.exe是什么进程 作用是什么 hdaudpropshortcut进程查询
  • win10预览版和正式版区别
  • windows桌面右下角图标不显示
  • js获取内容高度
  • bud3d跑酷
  • 列举出python的5个数据类型
  • python编写步骤
  • js获取上传文件的大小
  • python怎么用数组
  • js实现网页收藏的方法
  • time模块 python
  • 演艺明星
  • 如何查询税务是否变更
  • 增值税税控开票软件怎么下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设