uni-app 常用的页面间通讯方式

uni-app页面间通讯指南

最新推荐文章于 2025-09-05 23:34:23 发布

原创

最新推荐文章于 2025-09-05 23:34:23 发布 · 959 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了uni-app中不同页面间进行通讯的多种方法，包括利用URL传参、uni.$emit和uni.$on、EventBus、全局变量、Vuex以及nvue和vue页面的通讯。详细阐述了每种方法的使用场景和实现方式，帮助开发者灵活应对各种页面交互需求。

uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

一、利用url传参进行通讯

A页面向B页面传递参数

uni.navigateTo({      url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io')  });

B页面接收A页面传递的参数

export default {      onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数          console.log(option.id); //打印出上个页面传递的参数。        console.log(option. url); //打印出上个页面传递的参数。    }  }

二、uni.$emit()和uni.$on() 进行通讯

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

具体如何使用呢？我们假设一个场景，进入app,是未登陆状态，需要在我的页面点击登陆，进入登陆页面进行登陆。登陆成功之后，返回到我的页面，实时显示登陆后的用户信息。

监听事件

首先，在我的页面监听事件。

// 我的页面  onLoad(){      // 监听事件      uni.$on('login',(usnerinfo)=>{          this.usnerinfo = usnerinfo;      })  },  onUnload() {      // 移除监听事件          uni.$off('login');      },

因为事件监听是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件监听，避免重复监听。

触发事件

进入登陆页面，触发事件

// 登陆页面  uni.$emit('login', {        avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',        token: 'user123456',        userName: 'unier',        login: true  });

使用 uni.$emit 触发事件后，对应的 uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。

更多使用场景

以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景，如：