Uni-app返回上一页面并携带参数【转】

一、前言

        需要实现这么一个需求：在一个列表页面，当子页面直接返回时，不刷新列表页面。但是当子页面的数据有变动时，需要刷新列表页面。本篇博客记录一下我是如何解决这个问题的。

        解决思路：在onShow()方法内监听返回数据，当是需要当前页面刷新时，在子页面设置一个标识符，当监听到这个标识符，就调用接口刷新数据。

        在使用过程中遇到了些小坑，小白建议看完全部的内容再选适合自己的方法解决，不要盲目copy代码。

二、实现方法

1、第一个页面 one.vue ,在onShow()方法内监听返回的参数，返回的参数在上一级页面定义的变量叫‘isRefresh’；

<template>
    <view>
        <navigator hover-class="none" url="/pages/two/two">跳到第二个页面</navigator>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                
            }
        },
        onShow() {
            let that = this
            uni.$on('isRefresh',function(data){
                console.log('监听到事件来自返回的参数：' + data);
                // TODO 下面执行刷新的方法
            })
        },
        methods: {
            
        }
    }
</script>
 
<style>
 
</style>

2、第二个页面 two.vue，返回one.vue页面，要传递的参数是index:1

<template>
    <view>
        <button @click="goBack">点击返回上一页</button>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                index:1,//返回上一页要穿的参数
            }
        },
        methods: {
            goBack() {
                uni.$emit('isRefresh', this.index)
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>
 
<style>
 
</style>

三、遇到的坑

uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。 事件详情

        调用事件后要记得移除事件，或者直接使用 uni.$once 只调用一次，用完会自动移除事件。

 

-----------------------------------
©著作权归作者所有：来自51CTO博客作者Wjhsmart的原创作品，请联系作者获取转载授权，否则将追究法律责任
Uni-app返回上一页面并携带参数
https://blog.51cto.com/u_15300443/6453340