首先需要明確的一點，標題所說的子頁面調用父頁面的方法或者函數，是需要父子頁面配合的。如果子頁面不是你自己開發的， 或者父頁面不是自己開發的，那就沒辦法調用了。而且， 因爲業務的特殊需要，我們用到了iframe，如果只是Vue兩個父子組件的傳值或者調用，其實是非常簡單的，百度一下，就能出現很多。這裏就不一一贅述了。
在明確了以上的點以後，開始這一次的分享。首先先說一下， 沒有在Vue框架中， 就是單純的HTML頁面，子頁面調用父頁面的函數，其實非常的簡單。在子頁面中，有一個windows.parent的方法。我們打印來看一下這個方法中有什麼東西；
這還是一個windos的對象，而且裏面居然有了我在父頁面中定義的方法，大家可以看下，父頁面的代碼。
父頁面的代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <p>這裏是父元素</p> 10 <iframe src="./child.html" frameborder="0"></iframe> 11 </body> 12 <script> 13 function myconsole(a){ 14 console.log(a); 15 console.log("這裏是父元素的方法") 16 } 17 </script> 18 </html>
其實這樣的話就已經很簡單了，子頁面要是想要調用父頁面的方法，只需要在windos.parent中調用父組件定義好的方法就行了。下面是子頁面的代碼。
子頁面的代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <h1>這裏是子元素</h1> 10 <button id="btn">按鈕</button> 11 </body> 12 <script> 13 var btn = document.getElementById("btn") 14 btn.onclick = function(){ 15 console.log('子元素點擊了') 16 window.parent.myconsole("哈哈哈，這是傳參"); 17 console.log(window); 18 console.log(window.parent); 19 } 20 </script> 21 </html>
同時，我們可以看到，這個是可以傳參的。如果需要傳參的話，直接在這裏傳參就好了。
上面說完了普通的傳值，其實Vue中的就很簡單了。但是Vue中需要注意的一個點就是，在父頁面中的methods定義了方法，需要在mounted的時候，把這個方法暴露給window的全局對象；
父頁面代碼Vue：
1 export default { 2 name: "parent", 3 data() { 4 return {}; 5 }, 6 props: {}, 7 mounted() { 8 window.myconsole = this.myconsole;// 這裏需要暴露給全局，這樣的話，子頁面才能調用相對應的方法 9 }, 10 components: {}, 11 computed: {}, 12 methods: { 13 myconsole(){ 14 console.log("這裏是調用父元素中的方法"); 15 }, 16 } 17 };
子頁面想要調用其實也是很簡單的，請看下面的代碼：
子頁面的Vue代碼：
1 <template> 2 <div id="child"> 3 <button @click="clo">按鈕</button> 4 </div> 5 </template> 6 <script> 7 export default { 8 name: "child", 9 data() { 10 return {}; 11 }, 12 props: {}, 13 mounted() { 14 window.myconsole = this.myconsole; 15 }, 16 components: {}, 17 computed: {}, 18 methods: { 19 clo(){ 20 console.log('點擊了子頁面的按鈕') 21 window.parent.myconsole(); 22 }, 23 } 24 }; 25 </script>
這樣的話，就實現了，上面所說的，子頁面調用父頁面的方法。同時也是實現了，父子頁面的傳值。不過需要說明的一點就是，這個沒辦法直接調試，因爲必須打包完成之後才能在iframe中引入。所以大家在做這一方面的時候，多加打印日誌。等到調試完成之後，在刪除打印的東西。