Vue中，iframe中的子网页，调用父网页的方法
首先需要明确的一点，标题所说的子页面调用父页面的方法或者函数，是需要父子页面配合的。如果子页面不是你自己开发的， 或者父页面不是自己开发的，那就没办法调用了。而且， 因为业务的特殊需要，我们用到了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中引入。所以大家在做这一方面的时候，多加打印日志。等到调试完成之后，在删除打印的东西。
