关于html界面与vue界面跳转的问题

同学你好，1、老师下方和同学描述一下思路，如果同学感兴趣建议同学系统的学习一下前端知识。

2、Vue向html中传递数据

    1）vue中的代码

        在data中定义一个iframe绑定的页面的对象。

iframeWin: {}

    2）在mounted中去绑定具体Iframe的页面

this.iframeWin = this.$refs.iframe.contentWindow;

    3）发送信息给甘特图

sendIframeWinpMessage() {
	this.iframeWin.postMessage({
		params: "你想传的数据" /*在iframe页面中接收通过key也就是param接收，因此传输的数据可以是对象，包含多个key以及对应的数据*/
	}, "*");
},

    4）html中的代码

     在html中接收vue端传过来的值

window.addEventListener("message", function (event) {
  var data = event.data;
  console.log("从vue中获得的数据", data);
  // 定义一个变量去接收,然后就可以获得vue传过来的数据
  var test = data.params;
}, '*')

3、html向Vue中传递数据

    由于vue可以向iframe页面中传值，同理iframe也可以向vue页面中传值，方式如下。

    1）html页面中的代码

// 向vue中发送数据
window.parent.postMessage({
  params: "你想传输的值",
  cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
},'*');

    2）vue中的代码

        在mounted中加载监听事件，并配上处理监听对象的方法。

window.addEventListener("message", this.handleMessage);

        在method中定义方法，用于处理监听的事件。

handleMessage(event) {
 	// 获取从iframe页面中传过来的值
 	var cmd = event.data.cmd;
 	var params = event.data.params;
 }

祝学习愉快！