window.open父子页面自定义事件通信

我们在vue项目中,使用vue-router跳转的时候,在某些需求中可以使用router.resolve({path: '/test'}),返回一个返回一个路由地址的规范化版本,其中包含href属性,那我们就可以使用window.open()来打开一个新的浏览器页签跳转至某个vue页面。这篇就是要说一下之间的通信。
例如我从A.vue页面通过window.open跳转至B.vue页面,那么我们称A页面为父页面,B页面为子页面。
我们可以在子页面中通过window.opener拿到父页面的window。当然我们可以使用postMessage进行通信,之前写过一篇关于postMessage的文章(iframe嵌入页面跨域通信),但是这篇不讲postMessage,说一下通过自定义事件的方式来进行父子页面的传值通信。

1. 父传子

1.1 父页面向子页面自定义事件发送数据:

javascript 复制代码
const detail = { source: 'Main' }
window.dispatchEvent(new CustomEvent('mainInfo', { detail }))

1.2 子页面监听父页面事件接受数据:

javascript 复制代码
// 监听父页面自定义事件
window.opener.addEventListener('mainInfo', mainInfo)

function mainInfo(e: any) {
  console.log(e.detail, '接受父页面的数据-->>')
}

2. 子传父

2.1 子页面向父页面自定义事件发送数据:

javascript 复制代码
const detail = { source: 'Test' }
window.opener.dispatchEvent(new CustomEvent('testInfo', { detail }))

2.2 父页面监听子页面事件接受数据:

javascript 复制代码
// 监听子页面自定义事件
window.addEventListener('testInfo', testInfo)

function testInfo(e: any) {
  console.log(e.detail, '接受子页面数据--->>')
}

3. demo

main.vue(父页面)

html 复制代码
<template>
  <div class="main">
    <button @click="toTest">走</button>
    <button @click="sendData">发送数据</button>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const toTest = () => {
  let testUrl = router.resolve({ path: '/test' })
  window.open(testUrl.href, '_blank')
}

// 监听子页面自定义事件
window.addEventListener('testInfo', testInfo)

function testInfo(e: any) {
  console.log(e.detail, '接受子页面数据--->>')
}

// 向子页面发送自定义事件
const sendData = () => {
  const detail = { source: 'Main' }
  window.dispatchEvent(new CustomEvent('mainInfo', { detail }))
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>

test.vue (子页面)

html 复制代码
<template>
  <div class="test">
    <h1>Test</h1>
    <button @click="sendInfo">发送opener</button>
  </div>
</template>
<script setup lang="ts">

// 像父页面发送数据
const sendInfo = () => {
  const detail = { source: 'Test' }
  window.opener.dispatchEvent(new CustomEvent('testInfo', { detail }))
}

// 监听父页面自定义事件
window.opener.addEventListener('mainInfo', mainInfo)

function mainInfo(e: any) {
  console.log(e.detail, '接受父页面的数据-->>')
}
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
}
</style>
相关推荐
北城笑笑8 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia8 小时前
如何找回Harbor密码
前端
码码哈哈0.08 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩8 小时前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆8 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了8 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆8 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
码猿宝宝8 小时前
浏览器中javascript时间线,从加载到执行
开发语言·javascript·ecmascript
带娃的IT创业者8 小时前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
weixin_431600448 小时前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
前端·javascript·vue.js