持有另一个 window 中的 Vue 实例, 会导致某些情况下组件失去响应

[yubaoquan]

背景

一个页面中通过 iframe 加载了另一个页面, iframe 中的 vue 组件实例将自己注册到了 window 上, 并将对应的 key 值通过 postMessage 发给了父窗口. 父窗口通过 收到的 key 值将 iframe 中的子组件引用到自身的某个对象的某个值上

父组件:

window.addEventListener('message', (msg) => {
  if (msg.data?.type === 'xxx') {
    this.childRef = this.iframe.contentWindow[msg.data.id]
    this.childRef.setParent(this)
  }
})

子组件:

{
  data() {
    return {
      parent: null
    }
  },
  methods: {
    setParent(p) {
      this.parent = p
    }
  }
}

不要这样双方互相持有对方的引用!!!