vue與iframe配合

需求說明
有很多人是這么說的，有vue，還用jquery干嘛，還用iframe干嘛。
vue強大不可否認，但是就因此認為在vue中不需要使用其他前端工程的方法，這是不對的。

源代碼構成
一段大於3000行的js代碼，主要是前端svg繪圖，操作包括jquery、jquery-ui 創建、更改、刪除svg節點，以及多種方式查看、修改節點屬性，響應請求，
一段200行左右的js代碼，自定義插件，基於原型鏈，主要用於暫存svg繪圖的內容
一段css文件，未壓縮狀態1000多行
任務計划
需要將整個項目代碼基於vue和vuex重構，時間不充裕也很難解決前端繪圖各種響應，只能最簡單的方式，將這一部分移植到iframe中，節約時間並完整保留功能

需要功能
vue 父級向 iframe 子級傳遞參數

<iframe
id="iframe"
ref="iframe"
:src="`../../../static/xxx.html?id=${this.id}`"
frameborder="0"
width="100%"
height="100%"
scrolling="no"
></iframe>

其中，iframe 引用的html文件必須放在static目錄下，this.id 是要傳遞的參數

在 iframe里獲取傳的id
console.log(location.search);
1
iframe 調用 父級 vue 的函數
首先要在vue里聲明函數，並掛到window上

created(){
window['go'] = () => {
this.go();
};
},
methods: {
go(){
//do somthing...
}
},

 

這段代碼聲明了一個函數名為go的函數，並在created里將其賦給window，名字仍為 go

在iframe 里調用該函數
window.parent.go();

這樣就能調都在父級vue里聲明的函數go