h5嵌套iframe实时传参（适用vue）

今天看到一个同事研究给iframe传参，由于好奇，我自己也写了个demo，说起来其实也挺简单的，但是在此之前没有用过，便想记录一下

其中主要用到的是postMessage

在页面中引入一个iframe标签

<template>
    <div>
        <iframe src="http://10.36.37.40:8081" ref="iframe"></iframe>
　　　　　<input v-module='inputVal'>
　　　　　　<button @click='sendMessage'></button>

    </div>
</template>

　　在父页面添加监听iframe传过来的数据，并且向iframe传参

<script>
export default {
data: {
iframeWin: null
},
　　　　　mounted(){
　　　　　　　　window.addEventListener('message', this.handleMessage) // 监听iframe的事件
　　　　　　　　this.iframeWin = this.$refs.iframe.contentWindow
　　　　　},
　　　　　methods: {
　　　　　　　handleMessage(event) {
　　　　　　　　let data=event.data
　　　　　　},
　　　　　　sendMessage() {
// 给iframe传参
this.iframeWin.postMessage({
　　　　　　　　　　cmd: 'getParams', // cmd 用来判断触发的是什么事件
　　　　　　　　　　params: {
　　　　　　　　　　　　key: this.params,
　　　　　　　　　　}
　　　　　　　　　　}, '*')
　　　　　　}
　　　　　}
}

在iframe中向页面传递信息

<template>
    <div>{{params}}</div>
</template>
<script>
　　export default {
　　　　data: {
　　　　　　params: null
　　　　},
　　　　mounted() {

　　　　　　// 接受父页面发来的信息
　　　　　　window.addEventListener('message', (event) => {
  　　　　　　console.log(event)
  　　　　　　let data = event.data
  　　　　　　console.log(data)
  　　　　　　switch (data.cmd) {
    　　　　　　case 'getParams':
      　　　　　console.log('public data', data)
      　　　　　this.params = data.params.key
  　　　　　　}
　　　　　　})

　　　　}

　　}
</script>

这样就可以实现将页面中输入的内容同步到iframe中了