Vue，嵌入iframe的子页面，调用父页面方法

一、首先，假设我们有一个父页面：a.vue  其中有定义方法：

1.  
   methods: {
2.  
   homePageCallBack:function(object){
3.  
   console.log(object);
4.  
   }
5.  
   },

父页面：a.vue 中，嵌入了 iframe 标签，src为子页面路径：

1.  
   <template >
2.  
   <iframe src="子页面路径" frameborder=no style='width: 100%; height: 100%; border: 0; margin: 0; padding: 0;'></iframe>
3.  
   </template>

二、假设子页面是 b.vue  那么在子页面中，想要调用父页面中的 homePageCallBack 方法，如果你是前端开发者，子调父的方法一般会尝试：

1、window.parent.homePageCallBack();

2、this.$parent.homePageCallBack();

等等

实际上，你也是因为上面的方式，无法调用成功，才来搜的，哈哈哈哈~

三、这里我推荐一种方案（并不是最优的，只是我能力范围内能正常解决的方案，因为我只是Java开发工程师）

1、首先在父页面 a.vue 中的mounted中加入如下代码：

1.  
   mounted() {
2.  
   window.homePageCallBack = this.homePageCallBack;
3.  
   }

其作用就是，将这个方法作用域升级，使得子页面可以找到它

2、在子页面 b.vue 中的methods中加入如下代码：

1.  
   methods: {
2.  
   toPage: function (object) {
3.  
   window.parent.homePageCallBack(object);
4.  
   },
5.  
   }

调用该toPage方法即可，其实子页面还是正常通过window.parent去调用父类方法的，只需要父页面中将它的方法作用域升级到window里面让父页面能找到即可。

四、没有了，就这样就解决了。。。

恬恪学习网-彭珂

这篇好文章是转载于：学新通技术网