第一步,在主应用的props赋值microSelfData
//主应用
<template>
<div id="testApp" class="wrapper" />
</template>
<script>
import { loadMicroApp } from 'qiankun'
export default {
data () {
return {
microApp: undefined,
isModal: false,
microSelfData: {// 父子通信
eidtData: this.showModal
}
}
},
created () {
},
mounted () {
this.microApp = loadMicroApp({
name: 'test-client',
entry: 'http://localhost:8010',
container: '#testApp',
props: {
data: this.microSelfData
}
})
this.microApp.mountPromise.then(() => {
// 微应用加载完成后回调
console.log('test-client mounted')
})
},
beforeDestroy () {
if (!this.microApp) return
this.microApp.unmount()
},
methods: {
showModal (data) {
console.log('子应用',data)
this.isModal = true
}
}
}
</script>
第二步:子应用初始化的时候将mount函数中接到的props赋值到app,也就是vue实例上
renderWithQiankun({
bootstrap() {
console.log('微应用:bootstrap')
},
mount(props) {
// 获取主应用传入数据
console.log('微应用:mount', props)
app.parentMicro = props.data
app.use(store)
app.use(router)
app.mount('#test-app')
},
unmount(props) {
console.log('微应用:unmount', props)
},
update(props) {
console.log('微应用:update', props)
},
})
第三步:子应用中,去调用vue实例上的parentMicro的eidtData方法即可
const openDetail = (item: any) => {
appContext.app.parentMicro.eidtData('1231231232143423')
}