今天在做项目的时候发现的问题,这里做一下记录,已经解决了问题,但是原理尚不明确(感觉是框架的原因,但是我没有证据,对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做了代理