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

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

在组件内都引入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(父页面):

<template>
    <div id="repairBox">
      <iframe src="../../static/xx.html" frameborder="0" width="100%" height="1280px" id="childFrame" scrolling="no" >
      </iframe>
    </div>
</template>
<script>
  import Bus from '../bus'
    export default {
        name: "foreignRepair",
      mounted() {
       //接收命令
        Bus.$on('userImg',data=>{
          //向子页面传递命令
          document.querySelector('iframe').contentWindow.postMessage("changeImg");
        })
      },
    }
</script>

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(父页面)接收命令:

<template>
    <div id="repairBox">
      <input id="button" type="input" hidden value="" style="width:100px;" >
      <iframe src="../../static/xx.html" frameborder="0" width="100%" height="1280px" id="childFrame" scrolling="no" >
      </iframe>
    </div>
</template>
<script>
  import Bus from '../bus'
    export default {
      name: "foreignRepair",
      created(){
        //向first.vue传递命令
        if(window.localStorage.getItem('dialog')){
          Bus.$emit('dialog',true);
        }
      }
    }
</script>

3. first.vue 接收命令:

<script>
  import Bus from '../bus'
    export default {
        name: "",
      created(){        
         Bus.$on('dialog',data=>{
           //做你想做的事
           console.log(data)
           that.dialogFormVisible=true;
           window.localStorage.removeItem("dialog");
          })
      }
</script>
Logo

前往低代码交流专区

更多推荐