4. 实践基于qiankun的微前端demo - 主应用下发参数
2020-05-19 本文已影响0人
木头就是我呀
🤖 修改主应用,提供参数
- 修改主应用
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 - 应用间的通讯