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 ...
·
一、从头部组件向兄弟组件内的子页面传值
在头部弹框更改头像,用中央事件总线向兄弟组件传值
在组件内都引入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>
更多推荐
已为社区贡献5条内容
所有评论(0)