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

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

methods: {
        homePageCallBack:function(object){
            console.log(object);
        }
    },

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

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

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

1、window.parent.homePageCallBack();

2、this.$parent.homePageCallBack();

等等

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

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

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

mounted() {
    window.homePageCallBack = this.homePageCallBack;
  }

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

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

methods: {
    toPage: function (object) {
        window.parent.homePageCallBack(object);
    },
}

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

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

恬恪学习网-彭珂