uniapp页面与页面之间传值

uniapp yekong 91℃

在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);
  });
}

这些方法各有适用场景,可以根据实际需求和数据类型选择合适的传值方式。

喜欢 (0)