uni-app 页面间通讯方式介绍

利用url传参进行通讯

uni.navigateTo({  
    url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io')  
});

B页面接收A页面传递的参数

export default {  
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数  
        console.log(option.id); //打印出上个页面传递的参数。  
        console.log(option.url); //打印出上个页面传递的参数。  
    }  
}

uni.$emit()和uni.$on() 进行通讯

如何使用uni.$emit()和uni.$on() 进行页面间通讯

使用 EventBus 进行通讯

vue 组件间使用 EventBus 通讯

利用“全局变量”进行通讯

uni-app 全局变量的几种实现方式

nvue 和 vue 相互通讯

sinazl 1楼•13 小时前

在uni-app中，页面间通讯是一个常见的需求，可以通过多种方式实现。以下是几种主要的页面间通讯方式，并附上相关的代码案例。

1. 全局变量（Global Variable）

全局变量是一种简单直接的通讯方式，适用于数据量不大、通讯不频繁的场景。

// 在main.js中定义全局变量
Vue.prototype.$globalData = {
    userInfo: null
};

// 在页面A中设置全局变量
this.$globalData.userInfo = { name: 'John', age: 30 };

// 在页面B中获取全局变量
const userInfo = this.$globalData.userInfo;
console.log(userInfo);

2. 本地存储（Local Storage）

本地存储可以用于存储一些简单的数据，比如用户偏好设置等。

// 在页面A中存储数据
uni.setStorageSync('userInfo', { name: 'John', age: 30 });

// 在页面B中获取数据
const userInfo = uni.getStorageSync('userInfo');
console.log(userInfo);

3. 事件总线（Event Bus）

事件总线适用于较为复杂的场景，可以在不同组件或页面间传递事件和数据。

// 创建一个事件总线
const EventBus = new Vue();

// 在页面A中触发事件
EventBus.$emit('userLoggedIn', { name: 'John', age: 30 });

// 在页面B中监听事件
EventBus.$on('userLoggedIn', (userInfo) => {
    console.log(userInfo);
});

注意：在Vue 3中，由于Vue实例不再作为全局事件总线，推荐使用第三方库（如mitt）或Vue 3的provide/inject机制来实现事件总线功能。

4. Vuex（状态管理）

对于大型应用，Vuex是一个更好的选择，它提供了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

// 在store.js中定义Vuex状态
const store = new Vuex.Store({
    state: {
        userInfo: null
    },
    mutations: {
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo;
        }
    },
    actions: {
        updateUserInfo({ commit }, userInfo) {
            commit('setUserInfo', userInfo);
        }
    }
});

// 在页面A中修改状态
this.$store.dispatch('updateUserInfo', { name: 'John', age: 30 });

// 在页面B中获取状态
const userInfo = this.$store.state.userInfo;
console.log(userInfo);

以上是uni-app中页面间通讯的几种主要方式及其代码示例。在实际开发中，应根据具体需求选择合适的通讯方式。