vue项目中有iframe，如何互相传值

vue项目中有iframe，如何互相传值

1、vue 向iframe传值

//vue:
   <iframe
      id="template-iframe"
      ref="iframe"
      src="/iframe/GanttForResourceLoad/index.html"
      width="100%"
      height="100%"
      frameborder="0"
      style="min-height: calc(100vh - 127px)"
    />


//方法：
 sendMesFroIframe() {
      // 向iframe传值
      const mapFrame = this.$refs['iframe'];
      const iframeWin = mapFrame.contentWindow;
      iframeWin.postMessage(
        {
          value: 'backSuccess',
          id: 'vue',
          success: true
        },
        '*'
      );
    },

//iframe：
//iframe监听vue传过来的值:
// 监听vue页面传递过来的值
window.addEventListener('message', messageEvent=> {
    // console.log(messageEvent,'messageEvent---------------')
    if(messageEvent.source!=window.parent.window.parent) return;
    //    console.log('子收到messageEvent：',messageEvent);
       console.log('儿子收到vue的数据：',messageEvent.data);
  })

2、iframe向vue传值

window.parent.postMessage(obj, '*');

//如果js外面还有一层js，
//window.parent.window.parent.postMessage(obj, '*');

//vue 监听 iframe传过来的值

 mounted() {
  
    //   获取并监听iframe传递来的数据
    let that = this;
    window.addEventListener('message', function (e) {
      var res = e.data;
      console.log(res, 'iframe传递过来的数据');
      })
    }