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

🤖 修改主应用,提供参数

    1. 修改主应用main.jsregisterMicroApps,增加参数如下
// 注册子应用
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参数,内容是自定义的,我这边简单写了两个属性,msgfnmsg内主要放置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()
}
  1. 修改About页面,增加按钮,点击时触发show函数,执行console.log('two',msg),输出two 测试事件成功
<template>
    <div class="about">
        this is two about
        <br>
        <button @click="testFn">测试事件</button>
        <br>
    </div>
</template>

<script>
    export default {
        name: "About",
        methods: {
            testFn(){
                this.$show('测试事件成功')
            }
        }
    }
</script>

<style scoped></style>
执行结果

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