一、首先,假设我们有一个父页面: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里面让父页面能找到即可。
四、没有了,就这样就解决了。。。
恬恪学习网-彭珂
如果觉得《Vue 嵌入iframe中的子页面 调用父页面方法》对你有帮助,请点赞、收藏,并留下你的观点哦!