uniapp页面之间的通信

一、URL参数传递： 当从一个页面导航到另一个页面时，可以在URL中传递参数。

// A.vue 导航时传递参数
uni.navigateTo({
  url: '/pages/B/B?param1=value1&param2=value2'
});

// B.vue 接收参数
Page({
  onLoad: function (options) {
    console.log(options.param1); // 获取传递的参数值
  }
})

二、eventChannel事件通道： 适用于页面栈内的父子页面通信。

// 父页面触发事件：
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from pageA'});


// 子页面监听事件：
export default {
  onShow: function () {
    this.$scope.eventChannel.on('acceptDataFromOpenedPage', (res) => {
      console.log(res.data);
    });
  },
  onHide: function () {
    this.$scope.eventChannel.emit('close');
  }
}

三、缓存方式传递数据： 不推荐这种方式，因为它可能导致数据一致性问题。

// 使用uni.setStorageSync存储数据：
uni.setStorageSync('key', 'value');


// 使用uni.getStorageSync获取数据：
const value = uni.getStorageSync('key');

四、Vuex全局状态管理： 如果你的应用足够复杂，可以考虑使用Vuex来管理全局状态。

初始化Vuex store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    someData: ''
  },
  mutations: {
    setSomeData(state, data) {
      state.someData = data;
    }
  },
  actions: {
    updateSomeData({ commit }, data) {
      commit('setSomeData', data);
    }
  }
});

更新状态：

this.$store.dispatch('updateSomeData', 'new value');

访问状态：

computed: {
  someData() {
    return this.$store.state.someData;
  }
}

五、globalData： 可以在main.js中定义全局变量。

设置全局变量：

App({
  globalData: {
    userInfo: null
  }
})

访问全局变量：

this.appGlobal.globalData.userInfo

总结：选择哪种方式取决于你的具体需求和应用的复杂度。对于简单的需求，可以直接使用URL参数或者eventChannel；对于更复杂的应用，则推荐使用Vuex或者globalData来管理状态。