windows 父子窗口传值

需求：

需要把5个独立开发的管理端系统在一个网页端浏览（在不影响原系统的前提）
（因此想到了ifame，但是在子窗口中，如果登录信息失效，则需要用到父子组件传值）

1. 父组件传值给子组件

  //父窗口 html
  @load 处理ifame加载等待
 <iframe class="iframe" ref="iframe" :src="url" frameborder="0" @load="load">
 </iframe>

      
  //父窗口 传值 js
  this.$refs.iframe.contentWindow.postMessage(
    {name:'host',url:window.location.origin},
    "*"
  );

2. 父窗口接收值

created: function() {
    // 监听窗口值
    window.addEventListener("message", e => {

      if (e.data == "clear") {
        localStorage.clear();
        sessionStorage.clear();
        this.$router.replace({
          path: "/login",
          query: { redirect: this.$router.currentRoute.fullPath }
        });
      }
    });
}

3.子窗口接收/传值

      window.addEventListener("message", e => {
        //当url跟data有值时
        if (router.history.current.query.header && e.data) {
        
        //传给父窗口  不可直接用window
          top.postMessage("clear", e.data.url);
        }
      });