VUE组件如何与iframe通信问题

ue组件内嵌一个iframe，现在想要在iframe内获取父vue组件内信息，采用的是H5新特性PostMessage来解决跨域问题。

postMessage内涵两个API:

onMessage：消息监听

postMessage：消息发送

举个栗子，比如我要改变iframe内字体变成跟父级一样，直接上代码：

父

 <div class="mapbox">
      <iframe name="map" src="http://localhost:8083/setposition.html?add='add'"></iframe>
 </div>

clearMap(){
      let map = document.getElementsByName("map")[0].contentWindow
      map.postMessage("clearMap","*")
    }

iframe内：

window.addEventListener('message', function (evt) {
  
    if (evt.data == 'clearMap'){
        clearMap()
    }
    //event.data获取传过来的数据
});