开发问题汇总

[ITManITDream]

问题复现项目 地址：https://github.com/ITManITDream/micro-app

microapp：主应用（vite+ts+vue） subapp01：子应用01（webpack+vue3） subapp02：子应用02（webpack+vue2）

问题1：主应用发送数据给子应用，更改主应用数据，子应用未监听到数据变化。

主应用文件路径：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>

问题2：setData回调方法的入参无法接收

复现代码在问题1中。

[bailicangdu]

直接修改数据不会发送，要主动执行setData方法才行

[Wlisfes]

文档这个地方的注释不是说会重新发送吗