vue项目关闭子页面，并更新父页面的数据

今天下午是一个非常痛苦的，想要实现一个功能：

父页面打开了一个新的页面（浏览器打开一个新的窗口），并在子页面提交数据之后，父页面的数据要同步更新。

难点：父页面是一个表格列表，有分页功能，更新数据之后，要保证页面还在原来的页面。

把子页面关闭之后返回原来的页面，更新对应数据。

简单说下最开始使用的方法，以及最终采用方法，中间尝试的方法暂时略过不谈了…

1. 关闭当前窗口，强制刷新父页面

   window.opener.location.reload();刷新父窗口
   window.close();关闭当前窗口
   

   上面两行代码网上推荐的比较多的，但是存在问题：

   1. window.opener意思是当前浏览器窗口的打开者，就是指父窗口。window.opener.location.reload()强制刷新了父窗口，也就是说，并不会保留父窗口原有的状态。
   2. window.close();只是单纯的将当前窗口关闭了，焦点并不一定会回到父窗口。（若是打开子窗口的时候，同时打开了其它网页的窗口，关闭子窗口，焦点可能回到你刚刚浏览过的窗口）

在实现这个功能的时候，尝试过诸如以下方法：

1. 利用浏览器缓存父窗口参数，带参数刷新父窗口。

2. 在子组件内调用父窗口的方法（因为不是直接父子组件的关系，还尝试利用中间组件实现子组件内调用父组件方法）。

3. 在子组件内调用父窗口的方法（第二个方法没有成功，又尝试了将父组件方法暴露给window对象也没成功）。

4. …

5. 成功解决问题

尝试了很多方法多没有成功，我又回到了起点，开始分析问题。

分析之后发现其实这个大问题可以分为两个小问题：

1. 子窗口关闭后，焦点需要回到父窗口；
2. 焦点回到父窗口后，父窗口需要带状态刷新页面。

那我就一一攻破，首先是第一个小问题，查到了一些资料之后，发现可以实现，代码如下：

1. 子窗口关闭