vue跨窗口通信之新窗口调用父窗口方法实例
更新时间：2023年01月17日 09:41:45 作者：_处女座程序员的日常
由于开发需要,我需要在登录成功请求成功后,调用父窗口的一个点击事件方法,这篇文章主要给大家介绍了关于vue跨窗口通信之新窗口调用父窗口的相关资料,需要的朋友可以参考下
众所周知，在vue中bus等工具只能跨组件通信，如何实现跨窗口通信呢？
场景如下，我们在A窗口中新开了B窗口，想在B窗口中调用A窗口的方法？
这里还总结了一点window事件的方法：
window.opener.location.reload() 这样关闭B窗口后会刷新整个A窗口，体验效果不是很好
window.onunload 在关闭窗口之后触发
window.opener 获取父页面的window元素
注：
1.window.opener 实际上就是通过window.open()打开的窗体的父窗体
2.window.opener.父页面中的方法();//调用父页面中的方法
location.reload() 刷新页面
window.close() 关闭window.open()打开的窗口
window.onbeforeunload 关闭窗口前执行事件
A窗口：
mounted() {
// 注：getBpageList是提供给新窗口B触发的，实际上触发的是A的getApageList方法
window["getBpageList"] = (params) => {
this.getApageLists(params);
};
methods: {
async getApageLists(){
let res = await getPageList()
......
},
//点击新打开一个窗口B
detailsView(data) {
window.open(`....../${data.id}`);
},
}
b窗口调用A窗口方法
注：具体场景可以很多，比如放在点击事件中，或者关闭窗口前等
methods:{
emitAwindow(){
//window.opener 获取父页面的window元素
//判断A窗口有没有window.opener和getBpageList是不是个方法
if (window.opener && window.opener.getBpageList) {
window.opener.getBpageList(params);
} else {
//window.opener.frames[0] 获取到的window对象
window.opener.frames[0].getBpageList(params);
}
}
}
总结
到此这篇关于vue跨窗口通信之新窗口调用父窗口的文章就介绍到这了,更多相关vue新窗口调用父窗口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue3+ts+vant移动端H5项目搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了vue将文件/图片批量打包下载zip的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
vue项目启动出现cannot GET /服务错误的解决方法
这篇文章主要介绍了vue项目启动出现cannot GET /服务错误的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要为大家详细介绍了vue实现秒杀倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最近做的项目用到了全选全不选功能,于是就自己动手写了一个,这篇文章主要给大家介绍了关于Element树形控件el-tree实现一键全选、反选功能的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue实现伸缩菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要给大家介绍了关于vue3 element plus按需引入最优雅的用法,以及关于Element-plus按需引入的一些坑,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了ElementUI 修改默认样式的几种办法(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论