VUE引入Html页面并进行交互

VUE使用ifram引入html，并且实现页面间传值：

1、VUE页面代码：

<template>

  <div class="">

    <iframe :src="src" width="80%" height="500"  ref="iframe"></iframe>

    <div> <button @click="sendMessage">向iframe中的html发送信息</button></div>   

  </div>

</template>

<script>

 

export default {

  data () {

    return {

      src: 'http://localhost:8088/WebTest/',

      iframeWin: {}

    }

  },

  methods: {

    sendMessage () {

      // 外部vue向iframe内部传数据

      this.iframeWin.postMessage({

        cmd: 'getFormJson',

        params: {id:'接收到vue的传值'}

      }, '*')

    },