在uni-app中,页面之间传值可以通过多种方式实现,主要包括通过URL参数传递、使用全局变量、利用Vuex状态管理、以及通过事件通道(eventChannel)进行传值。以下是这些方法的简要说明和使用示例:
1. 通过URL参数传递
这是最简单的传值方式,适用于上级页面向下级页面单向传递简单数据。在跳转时,将参数拼接在URL后面,跳转后的页面可以通过onLoad
方法的option
参数获取这些值。
// 上级页面跳转并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 下级页面接收参数
export default {
onLoad: function (option) {
console.log(option.id); // 打印出上个页面传递的参数
console.log(option.name);
}
}
2. 使用全局变量
可以在globalData
中存储全局变量,在任何页面通过getApp().globalData
访问这些变量。
// 设置全局变量
const app = getApp();
app.globalData.userInfo = { name: 'uniapp', id: '1' };
// 访问全局变量
const userInfo = getApp().globalData.userInfo;
3. 利用Vuex状态管理
对于复杂的应用,可以使用Vuex进行状态管理,实现跨页面的数据共享[1]。
// 在store中定义状态和修改状态的方法
const store = new Vuex.Store({
state: {
userInfo: {}
},
mutations: {
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
}
}
})
// 修改状态
store.commit('setUserInfo', { name: 'uniapp', id: '1' });
// 获取状态
const userInfo = store.state.userInfo;
4. 通过事件通道(eventChannel)
适用于上级页面与下级页面双向传递复杂数据。在uni.navigateTo
中创建事件通道,并在跳转成功的回调中通过eventChannel
传递数据。跳转后的页面通过getOpenerEventChannel
获取事件通道并监听数据。
// 上级页面
const eventChannel = this.$scope.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' });
// 下级页面
onLoad() {
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('acceptDataFromOpenedPage', function(data) {
console.log(data);
});
}
这些方法各有适用场景,可以根据实际需求和数据类型选择合适的传值方式。