美文网首页mui 记录
nui-app 带参数返回上一页

nui-app 带参数返回上一页

作者: bianruifeng | 来源:发表于2019-08-26 11:44 被阅读0次

    在uni-app开发中使用uni.navigateBack后想将数据传到上个页面

    应用场景:A页跳转到B页,B页返回A页,并将参数带回给A页面。

    微信中使用setData可以做到:

    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    var prevPage = pages[pages.length - 2]; //上一个页面
    //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
    prevPage.setData({
        hope_job: "test"
    })
    uni.navigateBack();
    

    在uni-app开发中是无效的,解决办法如下:

    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');
    

    A页面:

    onLoad() {
        this.loadData();
        this.$fire.$on('fire', function(item) {
            console.log("item: " + JSON.stringify(item));
        })
    },
    onUnload() {
        this.$fire.$off('fire');
    },
    

    B 页面:

    selectItem: function(e) {
        console.log("e: " + JSON.stringify(e));
        var item = this.list[e]
        this.$fire.$emit('fire',item);
        uni.navigateBack()
    }
    

    关于onLoad、onUnload......
    查看官网nui-app 生命周期

    其他方法

    相关文章

      网友评论

        本文标题:nui-app 带参数返回上一页

        本文链接:https://www.haomeiwen.com/subject/scjrectx.html