iframe PostMessage 实现父子组件的传值

我们都知道可以使用iframe可以把一个页面嵌套到另外一个页面内部进行显示,那么这两个页面如何进行传值交互呢, 下面我们就简单的来看一下

首先,新建两个文件,parant.html和child.html(在这里我使用的是vue语法哈~)

首先是将child.html的内容嵌入parent.html中,代码如下所示:

  <div id="app"><iframeid="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe></div>

接着我们先来看子组件给父组件发送数据,

child.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bbbb</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><input type="text" v-model='username'>//点击按钮将输入框中的数据发送给父元素<button  @click='send'>发送</button></div><script>new Vue({el:'#app',data(){return{username:''}},methods:{send(){window.parent.postMessage(this.username,'http://127.0.0.1:5500/day01/a.html')}}})</script>
</body>
</html>

此时的地址 'http://127.0.0.1:5500/day01/a.html' 是我父页面的地址,如果你想要向所有嵌入它的父组件发送数据那么这里的地址可以替换为 *

parent.html接收数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>aaaa</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><iframe  id="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe></div><script>new Vue({el:'#app',data(){return{test:'我是父页面传过来的参数哦'}},mounted(){window.addEventListener('message',(msg)=>{console.log(msg.data);})},methods:{}})</script>
</body>
</html>

最后再来看看父组件给子组件发送数据

parent.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>aaaa</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app">//在子组件嵌入加载的过程中, 触发toChild事件<iframe @load='toChild()' id="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe></div><script>new Vue({el:'#app',data(){return{test:'我是父页面传过来的参数哦'}},mounted(){window.addEventListener('message',(msg)=>{console.log(msg.data);})},methods:{//父组件给子组件发送数据,此时这个地址为当前接收该数据的子组件的地址toChild(){let id = document.getElementById('child')id.contentWindow.postMessage(this.test,'http://127.0.0.1:5500/day01/b.html')}}})</script>
</body>
</html>

child.html接收数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bbbb</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app">hello<input type="text" v-model='username'><button  @click='send'>发送</button></div><script>new Vue({el:'#app',data(){return{username:''}},mounted(){//接收父组件传递的数据window.addEventListener('message',(data)=>{console.log(data,'===========');})},methods:{send(){window.parent.postMessage(this.username,'http://127.0.0.1:5500/day01/a.html')}}})</script>
</body>
</html>

以上就是全部的内容啦,前端小菜鸟一只, 有问题欢迎批评指正!!!

iframe PostMessage 实现父子组件的传值相关推荐

组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊: ...
vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用
1.vue父组件给子组件传值的方法子组件中通过props接收传值 props:{ username:{ type:String, default:"" } } 2.vue父组件调 ...
【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
通过大头儿子和小头爸爸，给女朋友讲明白了vue中父子组件的传值
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue知识总结第一篇vue组件的定义以及父子组件的传值。
vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html,而react是在render函数中..script用来写js,style中用来写css.那么我们来看看 ...
父子组件间传值，父传子，子传父
父子组件给子组件传值第一步:爸爸将数据递给儿子,所以我们就需要在子组件绑定父组件的数据第二步:爸爸都已经将数据给你了,那么你就要礼貌性的伸手去拿,这时我们可以利用props去接爸爸传过来的值第三 ...
Vue父子组件prop传值时的问题
项目场景: 最近在做Vue企业开发项目的时候碰到的一个问题问题描述: Vue在父子组件中使用props进行传值时,我在父组件中调用接口获取到了两种后端返回的数据,然后我想通过同一个子组件使用prop ...

iframe PostMessage 实现父子组件的传值

iframe PostMessage 实现父子组件的传值相关推荐

最新文章

热门文章