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

  • 怎样关闭微博微公益(怎样关闭微博微店)

    怎样关闭微博微公益(怎样关闭微博微店)

  • vivov2156a是什么型号(vivov2065a是什么手机)

    vivov2156a是什么型号(vivov2065a是什么手机)

  • 七彩虹显卡怎么样(七彩虹显卡怎么看是不是全新)

    七彩虹显卡怎么样(七彩虹显卡怎么看是不是全新)

  • 苹果手机网易云怎么和其他应用一起播放(苹果手机网易云音乐怎么转换mp3格式)

    苹果手机网易云怎么和其他应用一起播放(苹果手机网易云音乐怎么转换mp3格式)

  • kindle需要关闭屏幕吗(kindle的关闭屏幕是关机的意思吗)

    kindle需要关闭屏幕吗(kindle的关闭屏幕是关机的意思吗)

  • 美团信任分怎么开通(美团信任分怎么看涨了还是降了)

    美团信任分怎么开通(美团信任分怎么看涨了还是降了)

  • 6s要不要升级13

    6s要不要升级13

  • 怎么把抖音的同城关掉(怎么把抖音的同软照片发给朋友看?)

    怎么把抖音的同城关掉(怎么把抖音的同软照片发给朋友看?)

  • 拼多多怎么不让好友看到我的拼单(拼多多怎么不让别人看你的评价)

    拼多多怎么不让好友看到我的拼单(拼多多怎么不让别人看你的评价)

  • 电话嘟几声后正在通话中(电话嘟几声后无法接通)

    电话嘟几声后正在通话中(电话嘟几声后无法接通)

  • 注销过的手机号码可以重新注册吗(注销过的手机号码还能注册吗)

    注销过的手机号码可以重新注册吗(注销过的手机号码还能注册吗)

  • 为什么探探搜索不到人(为什么探探搜索不到别人用户名)

    为什么探探搜索不到人(为什么探探搜索不到别人用户名)

  • 美图秀秀怎么调字体大小(美图秀秀怎么调整照片大小kb)

    美图秀秀怎么调字体大小(美图秀秀怎么调整照片大小kb)

  • 华为m6能插u盘吗(华为m6能不能插内存卡)

    华为m6能插u盘吗(华为m6能不能插内存卡)

  • 探探暗恋短信怎么查看是谁(探探暗恋短信怎么查看是谁发的)

    探探暗恋短信怎么查看是谁(探探暗恋短信怎么查看是谁发的)

  • 苹果如何下载soul(苹果如何下载搜狗输入法)

    苹果如何下载soul(苹果如何下载搜狗输入法)

  • 苹果max怎么自带美颜(苹果max自带美颜了吗)

    苹果max怎么自带美颜(苹果max自带美颜了吗)

  • vivo录屏没声音(vivo手机录屏没声音)

    vivo录屏没声音(vivo手机录屏没声音)

  • 淘宝关注过的主播在哪找(淘宝关注的主页在哪找)

    淘宝关注过的主播在哪找(淘宝关注的主页在哪找)

  • 幻灯片的切换方式是指(幻灯片的切换方式在哪)

    幻灯片的切换方式是指(幻灯片的切换方式在哪)

  • 微信怎么关闭手机号码显示(微信怎么关闭手机联系人添加好友)

    微信怎么关闭手机号码显示(微信怎么关闭手机联系人添加好友)

  • med6s小米什么型号(小米型号mde6s)

    med6s小米什么型号(小米型号mde6s)

  • 「Vue面试题」在项目中你是如何解决跨域的?(vue的常见面试题)

    「Vue面试题」在项目中你是如何解决跨域的?(vue的常见面试题)

  • 应付账款转资本公积
  • 资源税的计税依据含增值税吗
  • 进口关税的计算方式
  • 可供出售金融资产和交易性金融资产
  • 不征税发票能报税吗
  • 税控盘减免税额转出会计分录
  • 2019年小规模纳税人增值税优惠
  • 使用权资产是什么类科目
  • 小规模纳税人所得税税率
  • 不动产折旧费计算公式
  • 固定资产转为投资性房地产折旧
  • 公司投资另一个公司的投资款怎么入账
  • 股票发行的会计分录
  • 公司厂房出租发票怎么开
  • 车船使用税是否必须交
  • 小规模纳税人日用品增值税税率
  • 公司个人所得税怎么申报
  • 财务物料消耗都有哪些
  • 结转实物发放的成本分录
  • 高杠杆资金是什么意思
  • 企业代扣代缴个人所得税系统
  • 建筑挂靠管理费用如何账务处理?
  • 有哪些费用发票可以抵扣
  • 购进的货物用于赠送
  • 个人给公司付款怎么做分录
  • 债权性投资和权益性投资的区别
  • 企业所得税免税政策
  • 生产车间的窗帘怎么处理
  • 总分公司合并缴纳个税
  • 收到即征即退退的发票
  • 物业专项维修资金可以退还吗
  • php解析xml文件
  • 华为手机开热点后wlan自动关闭
  • 在web页面中如果出现html语句
  • 莫纳皮拉
  • 房屋权属变更什么意思
  • 小企业会计准则和一般企业会计准则的区别
  • 什么是收付实现制?什么是权责发生制?
  • php js
  • 应收账款属于会计要素中的什么科目
  • 会计申报需要哪些数据
  • thinkphp模板引擎原理
  • 面试宝典下载
  • 软件开发行业税负
  • python tkinter ttk
  • 个体工商户超过100万怎么缴税
  • 如何计提增值税销项税额
  • mongodb性能测试
  • 未计提完固定资产怎么办
  • 短期借款的核算会计分录
  • 为什么说运输是实现物流合理化的关键
  • 水电费的会计分录
  • 非广告公司可以开广告费发票吗?
  • 呆账坏账对应五级分类
  • 房地产经纪公司排名
  • 什么叫误餐费
  • 收到投资款如何做税务登记
  • 去年的凭证今年未入账
  • MySQL关于exists的一个bug
  • 安装sqlserver2016步骤
  • linux系统的主要功能
  • win7无法运行
  • macbookair网页全屏
  • linuxsu命令作用
  • Linux进入图形界面卡顿
  • win8蓝牙设置在哪
  • win7怎么调窗口大小
  • 电脑windows8怎么样
  • windows8网络连接
  • 写出javascript的数据类型
  • Unity5 Assetbundle简单使用 及 打包Material文件超大的问题
  • glrotatef函数
  • AsyncTask onPostExecute()不执行,与JPush冲突
  • cocos2dx 3.0 quick lua schedler
  • 批处理文件的拷贝怎么写
  • django分层
  • 湖南国家电子税务局企业所得税申报进不去
  • 苏州市国家税务局稽查局李加云副局长
  • 深圳市百旺信投资有限责任公司
  • 小规模纳税人收什么税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设