vuecli组件嵌套iframe页面相互传值

一、从头部组件向兄弟组件内的子页面传值

 在头部弹框更改头像，用中央事件总线向兄弟组件传值

在组件内都引入import Bus from '../bus'

bus.vue :

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

1. first.vue点击事件传命令：

import Bus from '../bus'
click(){
   Bus.$emit('userImg',true);
}

2. second.vue（父页面）：

3. 子页面xx.html接受命令：

mounted(){
  window.addEventListener('message',  (e) => {
    console.log('receiveSon');
    let that =this;
    $.ajax({
      url:'',
      type:'get',
      dataType:'json',
      success:function(json){
        if(json.stat==1){
          //更新头像
          that.headerImage=json.data.headPortrait;
        }
      }
    });
  });

},

二、兄弟组件内的子页面向头部组件传值

1. 子页面点击事件
Signin(){
  parent.window.document.getElementById("button").value="open";
  window.localStorage.setItem('dialog','open');
  window.parent.location.reload()
}

2. second.vue（父页面）接收命令：

3. first.vue 接收命令：