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 父页面向子页面自定义事件发送数据：

const detail = { source: 'Main' }
window.dispatchEvent(new CustomEvent('mainInfo', { detail }))

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

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

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

2. 子传父 

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

const detail = { source: 'Test' }
window.opener.dispatchEvent(new CustomEvent('testInfo', { detail }))

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

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

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

3. demo 

main.vue（父页面）

test.vue （子页面）