在vue中嵌入html页面并传递参数实现3d功能

vue

<el-button @click="sendMessage"><el-button>
<div id="iframeId">
	<iframe id="iframe"  ref="frame"  scrolling="no"  style="border: 0"  width="100%"  height="100%"  :src='iframeSrc' @load="sendMessage">
	</iframe>
</div>
data() {
 return {
    iframeSrc : 'iframe嵌套的html页面地址'  
  }
},
methods: {
   sendMessage(){
      let val = $("#iframeId").height();  // 获取用于展示iframe页面区域的高度
      let iframeWindow = document.querySelector('#iframe').contentWindow;
      iframeWindow.postMessage(val ,"*");  // 发送消息至html页面
  },
}

html

 <div class="tem" id="tem">

 </div>

 window.addEventListener('message', function(event) { //接收vue传递的参数
      document.getElementById('tem').style.height = event.data + 'px';
 });