uni-app頁面通訊之返回頁面時傳遞參數

一般來說，在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