Vue组件中使用iframe,第二次进入iframe页面时,注册的messag被多次触发.

我的注册代码是:

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

iframe中通知事件触发的代码:

 window.parent.postMessage({ type: 'saveReport', value: res, formData: postData }, '*');

通过打印可知,多次进入iframe页面,触发iframe事件条件时:iframe中通知一次,但是包含iframe的vue页面监听事件执行多次

解决办法

在destory的生命周期中注销此事件,每次进入页面重新监听

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