uniapp两个tabbar页面之间传值
时间: 2025-02-14 19:42:24 浏览: 24
实现 UniApp 中 TabBar 页面间的值传递
由于 uni.switchTab
方法不支持 URL 参数传递[^1],因此需要采用其他方式来实现在不同 TabBar 页面之间传递数据。以下是几种常见的解决方案:
使用全局变量存储临时数据
通过定义一个全局对象,在其中保存要共享的数据。
// common.js 文件中创建公共函数库
export default {
globalData: {}
}
在源页面设置数据前先引入此文件并赋值给其属性;目标页面同样需导入该模块读取所需信息即可完成跨页通信过程[^2]。
利用本地缓存机制
可以借助于浏览器端提供的 localStorage 或者 sessionStorage API 来暂存待传输的信息项。这种方式适合用于少量简单类型的数值交换场景下操作方便快捷有效率高而且不会影响性能表现。
// 设置缓存
uni.setStorageSync('key', value);
// 获取缓存
const data = uni.getStorageSync('key');
发布/订阅模式 (EventBus)
建立事件总线作为中介容器负责监听特定主题的消息发布行为并向注册过的观察者广播通知更新状态变化情况从而达到间接通讯目的效果。
import Vue from 'vue';
const bus = new Vue();
// 源页面发送消息
bus.$emit('eventName', payload);
// 目标页面接收消息
bus.$on('eventName', callback);
相关推荐


















