vue 两个项目通过iframe通信，父项目离开当前页面（beforeRouteLeave）时，怎么调用子组件方法

Question

vue 两个项目通过iframe通信，父项目离开当前页面（beforeRouteLeave）时，怎么调用子组件方法

Answer 1

在父项目中离开当前页面时，可以通过获取子项目的 iframe 元素，然后通过 postMessage 方法向子项目发送消息，以触发子组件方法的调用。

以下是一个示例代码，展示了如何在 Vue 中实现父项目调用子项目的方法：

在父项目的 Vue 组件中：

beforeRouteLeave(to, from, next) {
  const iframe = document.getElementById('child-iframe'); // 获取子项目的 iframe 元素

  // 向子项目发送消息
  iframe.contentWindow.postMessage({ action: 'callChildMethod' }, '*');

  next();
}

在子项目中，你需要监听 window 的 message 事件，以接收父项目发送的消息，并根据消息内容调用相应的子组件方法：

mounted() {
  window.addEventListener('message', this.handleMessage);
},

beforeDestroy() {
  window.removeEventListener('message', this.handleMessage);
},

methods: {
  handleMessage(event) {
    if (event.data && event.data.action === 'callChildMethod') {
      // 调用子组件的方法
      this.$refs.childComponent.childMethod();
    }
  },
  
  childMethod() {
    // 子组件的方法实现
    // ...
  }
}

在子项目中，通过监听 message 事件，可以接收到父项目发送的消息。然后，根据消息内容判断需要调用的子组件方法，并在子组件的 methods 中实现相应的方法逻辑。

请注意，在父项目中使用 getElementById 方法获取子项目的 iframe 元素时，需要确保 iframe 的 id 属性为 child-iframe，以便正确地获取到子项目的 iframe 元素。