Vue随笔10-关于两个不同页面（窗口）之间怎么传值通信、调用方法的问题解决

---

前言

项目中遇到这么个cr—在新打开的页面提交文件后关闭这个页面后就刷新原本的父页面渲染出提交的数据，有想过用vuex的，但是太复杂要改动的东西太多没必要，之后想到过用window.opener.location.reload()这个方法的，但是体验太差了-这是整个页面的刷新，最终找了一上午才找到以下两个办法。

---

PS:不过经测试，使用方法一的话好像对我的代码不顶用，可能是我写的代码有哪部分限制了这个跨页面（组件）通信的，或者是不适用这个方法的，正常来说还是可以用的。

---

在父页面打开新页面的代码，代码如下（示例）：

     let data = {
          path:  'xxx', query:{xxx:xxx}
       }
      const {href} = this.$router.resolve(data)
      window.open(href, '_blank')

---

一、vm.$on(event,callback)的使用

在官网看到的教程，比较简短，参照网上其他人的使用方法：
参考：https://blog.csdn.net/TrZoey/article/details/82378067

1.新建middleUtil.js文件，代码如下（示例）：

import Vue from 'vue'
export default new Vue

2.之后在两个页面都import，代码如下（示例）：

 import middleUtils from './middleUtil.js';

3.在新打开的子页面（调用方），代码如下（示例）：

methods: {
    sumbit() {
        middleUtils.$emit('getData','data');
    }

4.然后是父页面（被调用方）的代码，代码如下（示例）：

    mounted(){
      var self = this;
      middleUtils.$on('getData',  (data)=> {
        self.getData();
      })
    },
    methods: {
      getData() {
          //获取渲染数据
      }

二、window.opener的运用

使用 open方法打开的页面,可以在当前页面获取到打开页面的值与方法

---

1.子页面（调用方）代码如下（示例）：

methods: {
    sumbit() {
        window.opener.getData()  //调用父页面方法
        window.close(); //关闭当前窗口
    }

2.父页面（被调用方）代码如下（示例）：

  mounted() {
    window['getData']=()=>{
      this.getData()
    }
  },
 methods: {
      getData() {
          //获取渲染数据
      }

---

参考1：https://www.jianshu.com/p/05c1e12a29b0
参考2: https://cn.vuejs.org/v2/api/#vm-on