第一步

1.1.子應(yīng)用

utils頁(yè)面中的方法聲明

export function e_microAppDispatch(param: any = {}) {
    // 微服務(wù)運(yùn)行狀態(tài)
    const microAppStatus = (window as any).__MICRO_APP_ENVIRONMENT__
    if (microAppStatus == undefined || microAppStatus == false) {
        param.success && param.success()
    } else {
        (window as any).microApp.forceDispatch(param)
    }
}

1.2 子應(yīng)用頁(yè)面引入并調(diào)用utils中的方法

import { E_Msg, e_microAppDispatch } from '@utils'  

 e_microAppDispatch({
            dataType: 'checkFormStatus',//用于判斷是什么類型的通信
            onSuccess: (res) => { //成功回調(diào) 可以有回參也可以沒有  這些函數(shù)均可以自定義 【增加刪除】
                //回調(diào)成功后的一些邏輯判斷
            },
            fail: () => {//失敗回調(diào) 可以有回參也可以沒有
                //回調(diào)失敗后的一些邏輯判斷
            },
        })

第二步

2.1 基座服務(wù)中

2.1.1 聲明一個(gè)基座服務(wù)的頁(yè)面 index.vue 及分類的方法

 <div v-loading="loading" class="ever-main-micro-app">
        <micro-app
            :name='microAppName'
            :url='microAppUrl'
            iframe
            keep-alive
            @datachange='handleDataChange'
            @created='created'
            @beforemount='beforemount'
            @mounted='mounted'
            @unmount='unmount'
            @error='error'
            class="ever-main-micro-app"
        /> 
        <SelectUser  ref="selectUserRef" @success="finishPersonChoose" />//獲取子服務(wù)要調(diào)取的頁(yè)面ref
    </div>

import { esiImpl } from './esi'

const handleDataChange = (e: CustomEvent): any => {
    const data = e.detail.data
    microdata.value = e.detail.data 
    //用戶選擇彈窗
     if (data.dataType === 'selectUser') {
        // 用戶選擇彈窗，把彈窗的ref傳遞過去
         data.selectUserRef = selectUserRef
    }
    esiImpl(data.dataType, data)
}

function finishPersonChoose(res: any) {//基座調(diào)用成功或失敗的回調(diào) 傳回子應(yīng)用
    microdata.value.onSuccess(res)
}

2.1.2 esilmpl方法實(shí)現(xiàn)

import { showApproval } from './show-approval'
import { selectUser } from './select-user'
const esiConfig = { 
    /** 審批查看 */
    showApproval,
    //用戶選擇框
    selectUser,
}

/**
 *  通訊函數(shù)
 * @param code
 * @param data
 */
export function esiImpl(code: string, data: any) {
    if (typeof esiConfig[code] === 'function') {
        esiConfig[code](data)
    } else {
        console.error('沒有此通訊函數(shù)?。?！')
    }
}

2.1.3 selectUser 方法實(shí)現(xiàn)

export interface selectUserParam {
    isMultiple: boolean
    selectUserRef: any // 彈窗
    successInfo: any[]
    onSuccess?: (data: any) => {}

    fail?: (data: any) => {}
}
export function selectUser(data: selectUserParam) {
    data.selectUserRef.value.startChoose(data.isMultiple)
}