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新窗口调用父窗口内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue在原窗口与新窗口打开外部链接的实现代码

    目录 Vue如何在原窗口与新窗口打开外部链接 总结 补充:vue跳转外部链接 vue跳转外部链接 Vue如何在原窗口与新窗口打开外部链接 Vue项目中如果是页面中的内部跳转,可以用this.$router.repalce()实现,如果我们用同样的方法跳转外部链接,我们的外部链接前面追加了​ ​http://localhost:8080/#/​​导致跳转出现问题,那么我们如何跳转到外部链接呢?跳转链接分为原窗口新窗口打开外部链接,具体讲解如下: HTML部分: <div class="fot

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a>    getGetMyPortfolioById(vals) {      getMyPortfolioById({       }).then(response = >{          const routerdata = this.$router.resolve({             

  • vue之带参数跳转打开新页面、新窗口

    目录 vue带参数跳转打开新页面.新窗口 vue带参数跳转打开新页面 vue带参数跳转打开新窗口 vue携带参数跳转页面 <router-link> 方式跳转 编程方式跳转路由 总结 vue带参数跳转打开新页面.新窗口 vue带参数跳转打开新页面 this.$router.push 跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 场景如下:点击首页的某一条任务的详情按钮,在当前页面打开任务详情页面,关闭详情弹框后返回首页 代码如下 <span @clic

  • vue跳转页面打开新窗口,并携带与接收参数方式

    目录 1.携带普通类型参数 2.携带复杂类型参数 vue页面跳转并传参的八种方式 方法一 方法二 方法三 方法四 方法五 方法六 方法七 方法八 1.携带普通类型参数 字符串.数字等. path:要跳转新页面的路由链接 query:要携带的参数 let pathInfo = this.$router.resolve({   path:'/product_detail',      query:{          productId:'11'      }  })  window.open(pa

  • vue打开新窗口并实现传参的图文实例

    vue打开新窗口并实现传参的图文实例

    我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过面向百度编程,发现网上的根本达不到这个效果,而且还都是坑,明明实现不了,还若有其事的写出来,于是我在标题特意加上有图有真相,诚我不欺,实现不了功能,就不要出来糊弄人. 先把我做好的代码写出来,后面再介绍别人实现不了的坑,以及这方面相关要注意的. 打开新窗口并传参代码 //打开新窗口并传参,参数不能显

  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    目录 vue路由跳转打开新窗口和关闭窗口 编程式导航 window.open( )方法 关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法 第二种方法 第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口 需求:从当前页面跳转到其他页面时,打开一个新窗口 比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航 编程式导航 使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只

  • JavaScript子窗口调用父窗口变量和函数的方法

    本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法.分享给大家供大家参考.具体如下: 示例1:子窗口是新打开的窗口 父窗口: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.

  • layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

    layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框,登录成功以后关闭弹框,并调用父窗口方法. 1.界面如下: 2.login.html的界面主要代码: <div class="layer_form"> <div class="form_item"> <label>手机号码:</label> <div c

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • VUEJS 2.0 子组件访问/调用父组件的实例

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • Vue import from省略后缀/加载文件夹的方法/实例详解

    目录 简介 省略后缀 说明 官网网址 详解 文件名相同的处理流程 加载文件夹 简介 说明 详解 实例 1. 路由配置中导入layout文件夹 2.layout/index.vue引入目录 3.components/index.js引入各个组件 简介 本文介绍Vue在import时省略后缀以及import文件夹的方法. 省略后缀 说明 可以配置省略后缀,比如:test.js,只用test即可. 官网网址 解析(Resolve) | webpack 中文文档 详解 配置文件:webpack.base

  • C#调用SQLite的方法实例分析

    本文实例讲述了C#调用SQLite的方法.分享给大家供大家参考.具体分析如下: 一.SQLite简介: 当我们用到海量数据时一般会用Oracle,SQL Server,DB2,Sybase,MySQL等数据库来保存和管理数据.如果只是程序中需要保存少量数据的话直接整到注册表里,或者保存到一个XML文件中.那如果数据量刚好不多不少,用Oracle这样的数据库有点小题大作,没有必要.有个XML保存的话存取速度又比较慢.咋整呢?这时用SQLite这个小型的嵌入式数据库就是非常理想的选择.它用起来也很简

  • 详解vue跨组件通信的几种方法

    在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <

  • Javascript实现Vue跨组件通信的方法详解

    Javascript实现Vue跨组件通信的方法详解

    目录 概述 思路要清晰 实现要迅猛 测试效果 优化 总结 概述 我们都知道. xxx.$on可以订阅一个消息. xxx.$emit可以发布一个消息. xxx.$off可以取消订阅一个消息. 思路要清晰 这个过程涉及到的几个概念. 订阅过程: 消息,肯定要区分,来个name. 消息也要有事做,来个handler. 一堆消息,要有地方放,来个arr. 订阅时,交代叫什么name,干什么handler. 发布过程: 发布时,交代叫什么,来个name. 发布也可能有一些参数,来个param. 发布时,交

  • js 调用父窗口的具体实现代码

    opener.show(); 父窗体需要顶一个show() 方法 父面页代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN"> <html> <head> <title>html.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,key

  • C++生成dll和调用dll的方法实例

    本人根据网络多个相关博客帖子原创 1)生成dll 建立两个文件 xxx.h , xxx.cpp xxx.h内容如下: #ifdef BUILD_XXX_DLL#define EXPORT __declspec(dllexport)#else#define EXPORT __declspec(dllimport)#endif extern "C"{EXPORT void example(void);... ...} xxx.cpp内容如下: #define BUILD_XXX_DLL#i

随机推荐