vue前端开发两个窗口之间的互相通信

于 2024-06-27 14:44:06 发布
阅读量157 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Judith_p/article/details/139979917
版权

一个页面window.open了一个新窗口，要关闭新窗口的同时进行老窗口的路由跳转。

方法1：网上查找的postMessagr方法 

在新窗口进行路由跳转判断并关闭新窗口的浏览器页面：

在老的窗口进行消息接收监听进行路由跳转

这个方法本地测试没问题后测试环境无法使用   解决无果后换了方法二用localStorage存储信息 发现依然不可取  ------可能是代码哪里不到位或者版本问题

方法三:在新窗口构建老窗口的url跳转  

橘子味小白菜
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的页面通讯
weixin_50386489的博客
01-13 100
uni.$emit()，uni.$on()，uni.$once()，uni.$off
温州上市企业VUE前端面试题
02-11
这可以通过Vue的事件总线（Event Bus）或者Vuex状态管理来实现，确保两个组件间的数据同步。 4. **回车栏位跳转** 实现此功能，需要监听键盘事件（keydown），特别是回车键（key code为13）。当用户在特定栏位按下...
Vue初级前端1-2年常见面试题
01-20
本Word前端面试题的主要针对面试Vue方向的前端初级程序员，主要内容包含：浏览器相关、HTML、CSS、JS+TS、Vue2+3。大家根据需要判断是否有必要查看该文档。 作为一个应试者，我知道大家肯定都希望能在本Word中看到面试题+答案，但还是需要给大家说明的是，本Word不会给完整的答案，最多会写明回答方向和思路，大家可以自行形成属于自己的回答答案，以避免大家背到一样的答案或者被营销号把该文档内容直接搬走了。 文档内容会分为高频、中频、低频面试题、算法题。高频是个人面试过程中几乎必被问到的问题，通常需要根据个人工程实践经验+配合题目答案回答面试官问题。中频是可能会被问到的问题，最好能够回答出来+有个人实践。低频属于是在简历里不写，面试官就近乎不会问的题，或者是比较偏门的题，我基本上没被问到过的题，但乍一看又很像是面试题的。算法题是博主遇到的面试算法题，肯定不局限于这些，这里给大家一个难度参考。
vue 跨标签页的数据共享(即跨标签页通信)
UserGuan的博客
11-07 3105
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。
vue兄弟组件（页面）之间通信的方法总结
weixin_74308571的博客
04-09 412
作为全局状态管理方案，Vuex也可以在非父子组件之间传递数据。你可以在Vuex store中存储数据，并在需要的组件中获取和修改这些数据。：如果你的组件是通过Vue Router路由跳转的，你可以使用路由参数来传递数据。Vue实例作为事件总线，并在需要传递数据的组件中触发和监听事件。
vue组件间通信六种方式（总结篇）
sinat_40572875的博客
11-10 1442
而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
Vue组件间通信的7种方法（全）
web全栈开发的博客
04-23 786
ℎ父组件拿到自己身上的子组件的属性已经方法，如果身上的子组件不止一个的话打印ℎ.children父组件拿到自己身上的子组件的属性已经方法，如果身上的子组件不止一个的话打印this.children的时候会以数组的形式展示出来。子组件的内部通过emit子组件的内部通过emit去触发这个事件 同时也可以传参过去 v-on去传递事件是写在子组件的标签身边的，然后回调函数是写在父组件的methods身上的。v-model:将数据传递下去的同时 子组件可以修改父组件提供过来的数据（emit方法）
vuexsharedmutations在标签窗口之间共享Vuexmutations
08-10
Vue.js 是一个流行的前端JavaScript框架，它以组件化和易用性著称。在大型应用中，状态管理是至关重要的，Vuex就是Vue生态中的官方状态管理库。它提供了一个集中式的存储，允许开发者管理应用的全局状态。然而，当...
VUE实现Studio管理后台之鼠标拖放改变窗口大小
10-15
Vue.js 是一个流行的前端JavaScript框架，它允许开发者构建可复用且易于维护的组件。在本例中，我们将关注于如何利用Vue组件和CSS来创建一个灵活的拖放系统，使得用户可以通过鼠标操作调整窗口的高度和宽度。 首先...
基于vue-element-admin和springboot搭建的管理后台项目开发脚手架源码+数据库+项目说明.zip
最新发布
07-02
- 前端使用vue-cli，后端使用Spring Boot，两个全家桶强强联合。 - 用简单优雅的方式整合shiro - 使用Gradle持续构建特性，开发时修改java代码无需重启 - 使用vue-element-admin做前端模板，摆脱写jQuery的痛苦 - ...
Vue中组件之间通信的-六大方式-总结
JackieDYH的博客
05-12 2185
方式一：props/$emit 父组件向子组件传值 通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据users:["Henry","Bucky","Emily"] 注：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed //App.vue父组件 <template> <div id="app"> <users v-bind:user.
vue中详细的通信方式
桃桃雾的博客
08-31 549
2.创建一个EventBus.js文件。
vue3关于两个不同页面（窗口）之间怎么传值通信、调用方法的问题解决
weixin_42498594的博客
03-17 2348
如果只是单纯的两个页面通信，就不需要写在app.vue里。
Vue跨标签页数据通信
qq_39691676的博客
06-20 289
BroadCast Channel(广播频道): 需要保证每个标签页使用同一个频道,比如下方的’sync-update’在同一浏览器项目地址处于不同的标签页中,建立两个页面间的数据通信，即：B页面新增/修改数据;A页面表格自动更新数据。LocalStorage Window.onstorage监听。BroadCast Channel (广播频道)Shared Worker 定时器轮询。IndexedDB 定时器轮询。cookie 定时器轮询。
使用Vuex进行两个页面逻辑交互
wooyang2018的博客
04-03 1218
前言 今天在写前端页面的时候，遇到这样一个问题，就是当一个页面由两个Vue文件构成的时候，如果在一个vue文件的时候进行了操作，那么需要将操作得到的数据传递给另外一个文件，那么另外页面就需要能够监听到前面这个页面的数据变化 这里以蘑菇博客举例，我们都知道蘑菇博客的头部是单独写在一个组件中，而下面的index的页面，又是另外一个vue文件，那么我在页面1点击搜索，页面2如何知道搜索的值呢？ 解决方案 其实解决的方案就是通过vuex来进行实现，步骤如下： 页面1当点击提交按钮的时候，调用vuex的保存方法，将
两个窗口如何实现通信
CRMEB小程序商城的博客
11-14 490
对于window.open()一般可以设置三个参数，这里就简单介绍了，如果需要更深入的了解就请自己查找资料第一个参数，打开新窗口的url地址第二个参数，给新窗口的名字(name)，并不是新窗口在窗口显示的title，在窗口下，通过window.name的方式拿到这里也可以设置_self(在旧窗口打开新窗口)，_blank(重新打开新窗口，默认就是该模式)第三个参数，设置打开新窗口的宽高等。
Vue组件通信方法汇总
XUELINGMM的博客
03-21 212
Vue组件通信方法汇总
vue中跨窗口通信：新窗口调用父窗口方法
qq_42931285的博客
09-16 3109
vue中跨窗口通信：新窗口调用父窗口方法
vue 跨页面双向通信
weixin_45076451的博客
11-11 5263
vue 跨页面双向通信 一、同源通信 1、localStorage 添加时间监听 window.addEventListener('storage', function (e) {}); 改变 localStorage 值，触发 storage 事件 window.localStorage.setItem('params', JSON.stringify(object)); 2、通过跳转 url 传参 // 跳转路径带参数 3、通过 BroadCast channel 广播实现通信 // 创建一个广播
vue两个子组件在父组件之间互相通信
11-26
在Vue中，父子组件之间的通信可以通过props和$emit来实现。而非父子组件之间的通信可以通过事件总线、Vuex等方式来实现。 下面是一个示例，演示了两个子组件在父组件之间互相通信的方法： 父组件： ```vue <template> <div> <child1 @to-parent="handleChild1"></child1> <child2 :message="message" @to-parent="handleChild2"></child2> </div> </template> <script> import Child1 from './Child1.vue' import Child2 from './Child2.vue' export default { components: { Child1, Child2 }, data() { return { message: '' } }, methods: { handleChild1(message) { this.message = message }, handleChild2(message) { this.message = message } } } </script> ``` 子组件1： ```vue <template> <div> <button @click="sendMessage">发送消息给父组件</button> </div> </template> <script> export default { methods: { sendMessage() { this.$emit('to-parent', '来自子组件1的消息') } } } </script> ``` 子组件2： ```vue <template> <div> <p>来自子组件1的消息：{{ message }}</p> <button @click="sendMessage">发送消息给父组件</button> </div> </template> <script> export default { props: { message: String }, methods: { sendMessage() { this.$emit('to-parent', '来自子组件2的消息') } } } </script> ``` 在父组件中，我们引入了两个子组件Child1和Child2，并分别通过@to-parent和:message属性来监听子组件的事件和接收子组件的props。在子组件1中，我们通过this.$emit('to-parent', '来自子组件1的消息')来触发to-parent事件，并向父组件传递消息。在子组件2中，我们通过props接收父组件传递的message，并在按钮点击时通过this.$emit('to-parent', '来自子组件2的消息')来向父组件传递消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值