当前页面-发送数据(iframe页面）
iframe包含第三方地址，将需要传输的数据拼接到url地址中。
iframe :src=''http://127.0.0.1/demo?${params}`' ref='iframe'/iframe 处理参数并将参数字符串编码为URI 组件
const query={ param1:'xx', param2:'ddd' }const params=encodeURIComponent(JSON.stringify(query)) 注册监听事件
Mounted() { window.addEventListener('message', this.handleGetMessage)},methods: { handleMessage(event) { if(event.data.status==='ok') { console.log(event.data.params, '当前事件数据') } }}
第三方地址(iframe子页面）
根据url获取拼接参数
const params=JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))发送数据
window.parent.postMessage({ status: 'ok', params: { id:111 }}, '*');
完整代码结构
iframe父页面发送和接收数据
子页面接受数据和发送数据
用户评论
哇，这个VUE项目里用iframe传值的方法太实用了，我之前一直在这方面头疼呢！感谢分享，学到了不少。
有12位网友表示赞同！
iframe在VUE里传值，听起来好复杂，但我相信你肯定能讲得通俗易懂，期待一下。
有18位网友表示赞同！
看了你的文章，发现我在VUE里用iframe传值的时候犯了很多错误，感谢纠正，以后要注意了。
有20位网友表示赞同！
这个iframe传值的方法我之前就知道，但你的文章让我对细节有了更深的理解，赞一个！
有14位网友表示赞同！
我是新手，对VUE和iframe都不是很熟悉，这篇教程对我来说真是雪中送炭。
有12位网友表示赞同！
用iframe传值确实是个好办法，但有时候感觉有点不稳定，希望有更多解决方案。
有15位网友表示赞同！
你的文章让我对VUE中的iframe传值有了全新的认识，太棒了！
有16位网友表示赞同！
我在项目中遇到过iframe传值的问题，一直找不到解决办法，这篇文章给了我灵感。
有6位网友表示赞同！
这篇文章讲得太详细了，我在VUE中使用iframe传值的时候，就是按照你说的方法解决的。
有5位网友表示赞同！
看了你的文章，我开始重新审视我的VUE项目，发现很多地方可以优化。
有18位网友表示赞同！
iframe传值在VUE中确实很有用，但有时候也会带来性能问题，需要权衡利弊。
有16位网友表示赞同！
我之前在使用iframe传值的时候遇到了安全问题，这篇文章提醒了我很多。
有16位网友表示赞同！
这篇文章让我对VUE中的iframe传值有了更全面的认识，收获很大。
有14位网友表示赞同！
在VUE中使用iframe传值，要注意跨域问题，这篇文章提醒了我这一点。
有9位网友表示赞同！
你的文章让我明白了iframe传值的一些陷阱，以后开发的时候要小心了。
有11位网友表示赞同！
这篇文章让我对VUE中的iframe传值有了新的认识，感谢分享。
有16位网友表示赞同！
我是做后端开发的，这篇文章让我对前端的技术有了更多了解，受益匪浅。
有13位网友表示赞同！
在VUE中使用iframe传值，要考虑用户体验，这篇文章给了我很多启示。
有15位网友表示赞同！