uni-app页面通讯之返回页面时传递参数

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

页面通讯

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

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

 1 <template>
 2     <view style="background-color: #FFFFFF;height: 100vh;">
 3         <navigator class="text-blue" url="page2">到页面2</navigator>
 4     </view>
 5 </template>
 6 
 7 <script>
 8     export default {
 9         data() {
10             return {
11             }
12         },
13         onShow: function() {
14             uni.$once('query' ,(query)=>{
15                 console.log("返回的参数=>" , query);
16             });
17         },
18         methods: {
19 
20         }
21     }
22 </script>
23 
24 <style>
25 
26 </style>

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

 1 <template>
 2     <view>
 3         <button @click="reBack">返回</button>
 4     </view>
 5 </template>
 6 
 7 <script>
 8     export default {
 9         data() {
10             return {
11                 
12             }
13         },
14         methods: {
15             // 返回上一个页面，并传递参数
16             reBack : function(){
17                 uni.$emit('query' , {a : 1});
18                 uni.navigateBack();
19             }
20         }
21     }
22 </script>
23 
24 <style>
25 
26 </style>

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

参考网址

posted @ 2021-09-07 15:03  陆陆无为而治者  阅读(1302)  评论(0)  编辑  收藏  举报