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，接收参数

在子应用内的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()
}

修改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 - 应用间的通讯

最后编辑于：2020.05.19 21:05:35