l***@foxmail.com
l***@foxmail.com
  • 发布:2018-09-20 11:00
  • 更新:2020-09-28 23:19
  • 阅读:35172

使用uni.navigateBack修改上一个页面值,多页面传参通信解决方案

分类:uni-app

此类需求大概意思是:A页面进入B页面,B页面返回并传值给A。

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面

//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
mdata:1
})
uni.navigateBack(); //上一个页面数据无法修改

解决方案:onfire.js 是一个很简单的事件分发的Javascript库(仅仅 0.9kb),简洁实用。github地址:https://github.com/hustcc/onfire.js/blob/master/README_zh.md
可以用于:

  1. 简单的事件分发;
  2. 在 react / vue.js / angular 用于跨组件的轻量级实现;
  3. 事件订阅和发布;
    A页面:
    onShow:function(){
    var that = this;
    onfire.on('setAddressInfo',function(addressInfo){
    that.addressInfo = addressInfo;
    })
    },
    B页面:
    selectText: function(e){
    var that = this;
    var that_addressInfo ={
    location: e.currentTarget.id
    }
    onfire.fire('setAddressInfo',that_addressInfo);
    uni.navigateBack();
    }

参考来源:https://juejin.im/post/5907f120b123db3ee48d2a4f

2 关注 分享
x***@sina.com damdmen

要回复文章请先登录注册

l***@163.com

l***@163.com

感觉都不对。。。有点扯淡
2020-09-28 23:19
996上班族

996上班族

mark一下,代理模式和通知模式?
2020-06-12 17:23
271355477qq

271355477qq

回复 3***@qq.com :
我试了好几次,确实是要加 $vm
2020-06-12 16:43
271355477qq

271355477qq

可以使用 但是不知道兼容性
2020-05-28 17:36
1***@qq.com

1***@qq.com

兼容那几个端啊
2020-05-25 15:12
菜鸟一枚2号

菜鸟一枚2号

我接受到了数据但是数据不会重新渲染出来怎么办
2020-04-10 09:54
3***@qq.com

3***@qq.com

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面

//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.$vm.setData({
mdata:1
})
调用错误了,应该中间机上.$vm
2019-11-05 20:53
kalicy

kalicy

1.在main.js文件中加入
Vue.prototype.$eventHub = new Vue();

2.在监听页面加入
this.$eventHub.$on('fire', function (data) {
console.log('fire - '+data);
});

3.在发送页面加入
this.$eventHub.$emit('fire','data');

4.记得取消监听,会消耗性能
this.$eventHub.$off('fire');

---------------------
作者:g401946949
来源:CSDN
原文:https://blog.csdn.net/g401946949/article/details/86502226
版权声明:本文为博主原创文章,转载请附上博文链接!
2019-04-24 16:24
哈库拉玛塔塔

哈库拉玛塔塔

我来填个坑


main.js中全局引入 onfire

import onfire from "./components/onfire/onfire"
Vue.prototype.$fire = new onfire()

监听页面A中监听事件

this.$fire.on('sss',()=>{
console.log("收到事件")
})


发送页面B中 发送事件

this.$fire.fire('sss','data');
2019-01-16 09:59
哈库拉玛塔塔

哈库拉玛塔塔

回复 l***@foxmail.com :
你这个就扯淡了。两个页面都引入onfire肯定监听不到,都不是同一个对象了。要在全局引入再new出对象。然后AB子页面调用方法
2019-01-16 09:38