uniapp跨页面通讯几种方法记录

方法1：使用缓存机制，如localStorage、SessionStorage等（不推荐用于数据量多的场景）

//异步缓存
uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});
uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

//同步缓存  参数1:key值，参数2：数据值
uni.setStorageSync('storage_key', 'hello');
const value = uni.getStorageSync('storage_key');

方法2：利用vuex缓存机制

//store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
		message:null
	},
	getters: {
		getMessage:state=>{return state.message;}
	},
	mutations: {
		setMessage(state,message){
			state.message = message
		}
	}
})
export default store

//页面中存储与获取
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
this.$store.commit('setMessage', 'abc');//存储

//获取
computed: {
		...mapState(['message'])
		}
//获取后js中正常使用this.message即可

方法3：利用路由跳转携带关键参数

//发起跳转的页面
goToRemark() {
				uni.navigateTo({
					url: '/pages/remark/remark?remark=' + this.remark
				});
			},
//接收的页面
onLoad({remark}) {
			this.remark = remark
		}
//或者可写成
onLoad(option) {
			this.remark = option.remark
		}

方法4：通过vue实例信息传递（该方法不适用与向还未创建的页面实例传递参数，可配合方法3一块使用）

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

//当前页面中
goToDetail(data) {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; // 上一页面实例
					prevPage.$vm.prevDateFun(data) // $vm获取对应页面的 Vue 实例并调用上一页定义的方法			
					uni.navigateBack();//返回上一页
				}
//上一页在对应方法中接收数据
prevDateFun(obj) {
				this.userInfo.name = obj.name;
				this.userInfo.phone = obj.phone;
				this.userInfo.address = obj.address;
			},

方法5：uni.emit 和uni.on

uni.$emit('update',{msg:'页面更新'})

uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})