Qiankun 子应用之间 如何通信 主应用和子应用如何通信

Qiankun 是一个基于 single-spa 的微前端框架，它提供了一种简单的方式来实现微前端架构。在 Qiankun 中，子应用之间以及主应用和子应用之间的通信可以通过以下几种方式实现：

全局变量：你可以在 window 对象上定义全局变量，然后在其他应用中访问这些变量。但是这种方式可能会导致命名冲突，所以你需要确保变量名的唯一性。

// 在一个应用中设置全局变量
window.globalVar = 'Hello, world!';

// 在另一个应用中访问全局变量
console.log(window.globalVar); // 输出：Hello, world!

自定义事件：你可以使用 window.dispatchEvent 和 window.addEventListener 来分别发送和接收自定义事件。这种方式可以避免命名冲突，但是需要手动管理事件的生命周期，例如在不需要事件时移除事件监听器。

// 在一个应用中发送自定义事件
let event = new CustomEvent('customEvent', { detail: 'Hello, world!' });
window.dispatchEvent(event);

// 在另一个应用中接收自定义事件
window.addEventListener('customEvent', function(event) {
    console.log(event.detail); // 输出：Hello, world!
});

状态管理库：你可以使用 Redux、Vuex 或其他状态管理库来管理应用的状态。然后你可以在一个应用中修改状态，然后在其他应用中监听状态的变化。

// 在一个应用中修改状态
store.dispatch({ type: 'UPDATE_USER', payload: 'admin' });

// 在另一个应用中监听状态变化
store.subscribe(() => {
    console.log(store.getState().user); // 输出：admin
});

使用 Qiankun 的通信机制：Qiankun 提供了一种基于 props 的通信机制。你可以在主应用中通过 props 传递数据给子应用，然后在子应用中通过 props.onGlobalStateChange 和 props.setGlobalState 来监听和修改全局状态。

在主应用中：

import { registerMicroApps, start } from 'qiankun';

// 初始化全局状态
let globalState = {
    user: 'admin'
};

registerMicroApps([
    {
        name: 'subApp',
        entry: '//localhost:8080',
        container: '#container',
        activeRule: '/sub-app',
        props: {
            globalState,
            onGlobalStateChange: (state, prev) => {
                // state: 变更后的状态; prev: 变更前的状态
                console.log(state, prev);
            },
            setGlobalState: (state) => {
                globalState = { ...globalState, ...state };
            }
        }
    }
]);

start();

在子应用中：

export function mount(props) {
    // 监听全局状态变化
    props.onGlobalStateChange((state, prev) => {
        console.log(state, prev);
    });

    // 修改全局状态
    props.setGlobalState({
        user: 'guest'
    });
}

在这个例子中，主应用通过 props 传递全局状态和两个函数给子应用。子应用可以通过这两个函数来监听和修改全局状态。