Vue中跨标签通信详解
前言
最近看到别人的 后台管理系统 做了这样一个功能:
- 当在列表页时，点击列表对应的修改按钮，浏览器打开一个新的 tab 页
- 在新的 tab 页上是一个详情页，当修改里面的详情数据后，点击提交
- 列表页当发现详情页面提交后，会重新请求数据
感觉这个功能很有趣，找了几个比较好的方案，做一个记录
storage
storage 可以跨页面触发事件,下面是 MDN 关于 storageEvent 的介绍
所以我们可以根据 storage 的这个特性来做
我们使用一个按钮模拟 列表页面的修改按钮
点击这个按钮,跳转到 详情页面
使用 window.open 可以打开一个新的 tab，使用 vue-router 只能在页面内跳转
doClick() {
window.open("http://localhost:8080/detail", "_blank")
}
在 mounted 中编写监听函数
window.addEventListener('storage', function (event) {
if (event.key === 'shareData') {
const newData = event.newValue;
console.log('收到的更新数据：', newData);
}
});
在详情页面，我们使用 input 表示详情 form, 一个按钮表示 提交
在修改中只需使用 storage 保存输入框里面的值即可(输入框已经使用v-model绑定在变量num上)
change() {
localStorage.setItem('shareData', this.num);
}
当点击修改时,可以看到 列表中的监听函数生效
这个 this.num 只是模拟，实际上只要 stoage 不重复即可触发监听，等触发监听后就可以重新发起请求
BroadcastChannel
BroadcastChannel是一个专门跨标签通信的解决办法
核心在于两个 tab 使用同一个 BroadcastChannel name,是频道的唯一标识
新建 BroadcastChannel.js,目的是为了多个 tab 使用同一个BroadcastChannel.name，可以在使用通信结束过后断开其与对应频道的关联
BroadcastChannel.js
const channelObj = new BroadcastChannel('BroadcastChannel');
export {
channelObj
}
在列表页中的 mounted 函数中监听
import {channelObj} from "./BroadcastChannel"
channelObj.addEventListener("message", function (event) {
const newData = event.data;
console.log('收到的更新数据：', newData);
})
我们在详情页面使用 postMessage 发送消息
import {channelObj} from "./BroadcastChannel"
change() {
// 发送消息
channelObj.postMessage(this.num);
}
同样的也可以收到更新后的数据，和 storage 不同的是，this.num 可以为相同的值
visibilitychange(补充：不涉及标签通信)
类似于小程序中的 onShow 方法,当当前 tab 页面展示隐藏时会触发这个事件，同样的，在切换 tab 时也可以触发这个事件
window.addEventListener("visibilitychange", () => {
if(document.visibilityState === "visible"){
console.log("页面可见")
}else{
console.log("页面不可见")
}
});
在页面可见时就会调用更新列表，这种方法的缺点是不论是否点击了详情提交按钮都会执行，不涉及标签通信
到此这篇关于Vue中跨标签通信详解的文章就介绍到这了,更多相关Vue跨标签通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现锚点定位功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决
这篇文章主要介绍了Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
elementUI使用el-upload上传文件写法及避坑总结(上传图片/视频到本地/服务器及回显+删除)
upload上传是前端开发很常用的一个功能,下面这篇文章主要给大家介绍了关于elementUI使用el-upload上传文件写法及避坑的相关资料,包括上传图片/视频到本地/服务器及回显+删除,需要的朋友可以参考下2023-03-03
Vue3 Element Plus el-form表单组件示例详解
这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版，提供了更多的表单控件和功能，同时还改进了一些细节和样式，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue-video-player 断点续播的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了在vue中根据光标的显示与消失实现下拉列表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了关于新建的vue3项目一直提示代码格式警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue中的无限加载vue-infinite-loading的方法
本篇文章主要介绍了Vue中的无限加载vue-infinite-loading的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了vue-loader的工作原理与使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
最新评论