緣起

微前端的方案很多，大體上調研階段躲不過qiankun, wujie, single-spa這些。

如果你使用的是無界，那麼在使用子應用的時候會發現事件回調函數的e.target指向發生了變化，導致你原先的從e.target.value取值的方式無法讀取到表單的值，或者setTimeout的回調函數執行會出現一些詭異的現象。

官方解釋

對於這種現象官方的文檔也做了解釋，官方歸咎於瀏覽器原生的處理導致了這個問題。

解決辦法

解法-1（更直接）

在異步處理時，獲取 e.target 的方式需要修改成： (e.target.shadowRoot && e.composed) ? (e.composedPath()[0] || e.target) : e.target

解法-2（更徹底）

對於自定義的組件，按照解法1可以解決，那如果我引用的第三方組件庫遇到了這個問題該怎麼處理呢？我總不能fork一份自己魔改吧。

聰明的你一定想到了，那我是不是可以劫持掉e.target，讓它指向我想要的地方。

這個方式非常徹底，但是聽起來風險很大，如果造成事故了怎麼辦？

當然讓官方被這個鍋，其實使用一個官方提供的插件就OK了

插件的鏈接在這裏。

使用方法如下：

import { startApp } from 'wujie'
import { EventTargetPlugin } from "wujie-polyfill";
// 無框架
setupApp({
   name: '唯一id',
   url: '子應用地址',
   exec: true,
   el: '容器',
   sync: true,
   plugins: [EventTargetPlugin()]
}) 

// vue 
<WujieVue
  width="100%"
  height="100%"
  name="xxx"
  :url="xxx"
  :plugins=“[EventTargetPlugin()]”
 ></WujieVue>

// react
<WujieReact
  width="100%"
  height="100%"
  name="xxx"
  url="{xxx}"
  plugins="{[EventTargetPlugin()]}"
 ></WujieReact>

如上，在主應用中使用這個官方插件就可以解決問題了。神奇的地方在於，官網的Q&A沒有直接貼上這個插件的鏈接，以至於我還是在stackoverflow上面發現的這個插件，也就有了這篇文章的撰寫。

希望能幫到你。

公眾號：webcooking