Open ITManITDream opened 11 months ago
问题复现项目 地址:https://github.com/ITManITDream/micro-app
microapp:主应用(vite+ts+vue) subapp01:子应用01(webpack+vue3) subapp02:子应用02(webpack+vue2)
主应用文件路径:microapp/src/views/subapp02.vue
<template> <micro-app name='subapp02' url='http://localhost:8081/' :data="dataForChild" @datachange="dataChange"> </micro-app> </template> <script lang="ts" setup> import { getCurrentInstance } from 'vue' const { proxy }: any = getCurrentInstance() // 定义接口 interface childData { name: string, age?: number, time: number | string } // 传递给子应用的数据 const dataForChild: childData = { name: 'SubApp01', time: new Date().getTime() } setTimeout(()=>{ dataForChild.age = 18 dataForChild.time = new Date().getTime() console.log('更新了数据,子应用无法监听到数据更新') }, 3000) // 手动发送数据给子应用:同时发送多次会合并数据之后再发送,第二次发送的info会覆盖第一次发送的info proxy.microApp.setData('subapp02', { name: '张三', info: { address: '重庆' } }) proxy.microApp.setData('subapp02', { info: { code: '001' } }) proxy.microApp.setData('subapp02', { age: 18 }, (res: any)=>{ console.log('主应用数据发送成功: ', res) }) function onmounted(){ // 获取子应用发送给主应用的数据 const dataFromChild = proxy.microApp.getData('subapp02') console.log('mounted dataFromChild', dataFromChild) } // 监听子应用发送数据 function dataChange(e: any){ console.log('dataChange', e.detail.data) } // 绑定监听函数 proxy.microApp.addDataListener('subapp02', (data: any)=>{ console.log('mainApp addDataListener: ', data) }) // 全局数据通信 proxy.microApp.setGlobalData({ people: '张三' }, (data: any)=>{ console.log('全局数据发送完毕', data) }) </script>
子应用文件路径:subapp02/src/App.vue
<template> <div> <h3>这是Vue2项目subapp02的页面</h3> </div> </template> <script> export default { name: 'App', created(){ // 直接获取主应用发送的数据 // const data1 = window.microApp.getData() // console.log('getData: ', data1) // 监听函数 function dataListener(data){ console.log('addDataListener: ', data) return '子应用收到数据了' } // 绑定监听函数 window.microApp.addDataListener(dataListener, true) // 子应用向主应用发送数据 window.microApp.dispatch({name: 'jack'}, (res)=>{ console.log('数据发送成功', res) }) // 获取全局数据 const globalData = window.microApp.getGlobalData() console.log('globalData', globalData) }, } </script>
复现代码在问题1中。
直接修改数据不会发送,要主动执行setData方法才行
文档这个地方的注释不是说会重新发送吗
问题复现项目 地址:https://github.com/ITManITDream/micro-app
问题1:主应用发送数据给子应用,更改主应用数据,子应用未监听到数据变化。
主应用文件路径:microapp/src/views/subapp02.vue
子应用文件路径:subapp02/src/App.vue
问题2:setData回调方法的入参无法接收
复现代码在问题1中。