vue的iframe交互

使用背景

微前端使用ifame的方式嵌入，不同页面之间需要交互一些数据，或者子工程要通知基座工程执行一些操作。 页面大致是这样

直接上代码

接收

  mounted() {
    window.addEventListener(
        "message",
        (e) => {
          if (e.data.type == "xxx") { //区分用途
          }
        },
        false
    );
  },

发送

this.$refs.xxx.contentWindow.postMessage(
    {
      type: "Search", //用于区分用途
      con: {},//要传输的
    },
    "*"
);

补充

为了确保ifame可以在加载完成后才触发父给子的函数, 应在子内在给父发送已经渲染完成的标识,然后父接受参数在给子发