一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
1.父向子页面传值
a.vue 父页面 b.vue子页面
<!--a.vue父页面 -->
<iframe allowTransparency="true" ref="mapFrame" class="iframe_box" :src="curUrl"></iframe>
//a.vue 父级给子级发送数据
methods:{
//data传递的数据
sendMessage(data) {
//判断子级的节点存在，$refs取vue节点
if (this.$refs.mapFrame) {
let iframeWin = this.$refs.mapFrame.contentWindow; //获取这个属性
iframeWin.postMessage(data, "*"); //发送数据
}
},
}
//b.vue 子级页面接受数据（和父级监听一样）
mounted(){
//父页面监听发送过来的消息
window.addEventListener("message", this.handleMessage);
},
methods:{
//监听回调
handleMessage(event){
const data = event.data; //event.data里就是传过来的数据
}
}
2.子向父页面传值
//b.vue 子级给父级发送数据
methods:{
sendMessage(){
window.parent.postMessage(data, "*"); //data传递的数据，“*”跨域的域名 *代表所有
}
}
//a.vue 父级页面接受数据
mounted(){
//父页面监听发送过来的消息
window.addEventListener("message", this.handleMessage);
},
methods:{
//监听回调
handleMessage(event){
const data = event.data; //event.data里就是传过来的数据
}
}
谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
推荐一下自己的专栏，欢迎大家收藏关注😊~
