uniapp页面通讯之返回页面时传递参数

一般来说，在uni-app中，使用uni.$emit、$uni.on、$uni.once、$uni.off进行页面通讯。

页面通讯

现在设置一下场景。从page1跳转到page2；从page2点击确认，返回上一个页面，并传递参数。

页面1接收参数，代码如下：

<template>
    <view style="background-color: #FFFFFF;height: 100vh;">
        <navigator class="text-blue" url="page2">到页面2</navigator>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onShow: function() {
            uni.$once('query' ,(query)=>{
                console.log("返回的参数=>" , query);
            });
        },
        methods: {

        }
    }
</script>

<style>

</style>

页面2传递参数，代码如下：

<template>
    <view>
        <button @click="reBack">返回</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            // 返回上一个页面，并传递参数
            reBack : function(){
                uni.$emit('query' , {a : 1});
                uni.navigateBack();
            }
        }
    }
</script>

<style>

</style>

点击“返回”按钮，页面1，返回的值为： 返回的参数=> {a: 1} 。

参考网址

• 如何使用uni.$emit()和uni.$on() 进行页面间通讯：https://ask.dcloud.net.cn/article/36010
• 页面通讯：https://uniapp.dcloud.io/api/window/communication?id=emit