vue中动态添加html元素并绑定点击事件onclick，在qiankun下的子系统失效

今天在做项目的时候发现的问题，这里做一下记录，已经解决了问题，但是原理尚不明确（感觉是框架的原因，但是我没有证据，对qiankun不太了解）

项目描述：采用的微前端框架qiankun，进行子系统的开发，子系统是可以独立运行的。

问题：动态添加html元素并添加点击事件，子系统独立运行时点击事件生效，使用微前端框架后，点击事件找不到绑定的方法。

首先，在vue中动态添加html元素并添加点击事件的连接桥梁是window对象

需要插入的HTML代码：

const content = `<button onclick="mapMenu()">这是按钮</button>`;

methods中定义函数：

mapMenu() { 
	// 代码块
	...
}

在mounted中连接起来：

window.mapMenu = this.mapMenu;

为什么动态添加的html需要将事件挂载在window，而不是直接调用methods中的方法？

原因：vue代码，需要分为编译前，和编译后，用动态添加html标签的方法，实际上就是编译后添加进这个html语句，再生成这个控件，这时候再控件里写的onclick就是去找编译后叫这个名称的方法，而直接写function的话，就生成的是编译前的方法，生成html之后再去找这个方法，必然是找不到的，找到的只能是后面写在window.function的全局方法。

然后，项目中的问题是，在使用qiankun框架之后会报错，显示onclick绑定的方法未定义。然后就在想是不是window的问题，于是在子系统独立运行和使用qiankun运行打印window对象，如下图：

图一：子系统独立运行时打印的
图二：qiankun框架下打印的

可以发现，在qiankun下原来的window对象变成了proxy代理对象，于是我将onclick中绑定的方法修改为window.proxy.mapMenu。但是修改完之后，又发现子系统单独运行时会报错，于是添加了判断，同时兼容两种。

const click = `${window.proxy ? 'window.proxy.' : ''}mapMenu`

分析：可能是qiankun对子系统的window做了代理