4. 实践基于qiankun的微前端demo - 主应用下发参数

修改主应用，提供参数

• 1. 修改主应用main.js的registerMicroApps，增加参数如下

// 注册子应用
registerMicroApps([
        {
            name: 'one',
            entry: '//localhost:6661',
            container: '#micro-view',
            activeRule: '/one',
            // ----------------> 增加props参数
            props: {
                msg: {
                    data: {
                        mt: 'you are one'
                    }
                },
                fn:{
                    show(msg){
                        console.log('one:',msg);
                    }
                }
            }
        },
        {
            name: 'two',
            entry: '//localhost:6662',
            container: '#micro-view',
            activeRule: '/two',
            // ----------------> 增加props参数
            props: {
                msg: {
                    data: {
                        mt: 'you are two'
                    }
                },
                fn:{
                    show(msg){
                        console.log('two:',msg);
                    }
                }
            }
        }
    ],
    {
        beforeLoad: [
            app => {
                console.log('beforeLoad');
            }
        ],
        beforeMount: [
            app => {
                console.log('beforeMount');
            }
        ],
        beforeUnmount: [
            app => {
                console.log('beforeUnmount');
            }
        ],
        afterUnmount: [
            app => {
                console.log('afterUnmount');
            }
        ]
    })

只增加了props参数，内容是自定义的，我这边简单写了两个属性，msg和fn，msg内主要放置data参数，fn是父级传递给子级的回调函数，子级通过触发该回调函数，进行父子通讯。

修改子应用two，接收参数

1. 在子应用内的main.js中，修改导出的mount函数，将父级传入的fn绑定到Vue的原型上。

// 生命周期 - 挂载后
export async function mount(props) {
    console.log('two mount');

    // 设置主应用下发的方法
    Object.keys(props.fn).forEach(method =>{
        Vue.prototype[`$${method}`] = props.fn[method]
    })
    
    // 渲染
    render()
}

2. 修改About页面，增加按钮，点击时触发show函数，执行console.log('two',msg)，输出two 测试事件成功

执行结果

此时，即完成主应用的下发参数。我们简单的实现了主子应用的通讯，“回调函数” 只是一种实现方式，且不是很完善，因为其传值只在mount时传递了一次，后续的一些方法或事件就无法实时增加或改变，所以，qiankun框架提供了一种 实现通讯 的方式，很轻量，也很好用，下一节我们来使用一下。
5. 实践基于qiankun的微前端demo - 应用间的通讯