vue中的窗口通讯，父子窗口如何交互

今天做项目遇到一个原来少用的功能-----vue窗口通讯，大佬帮忙讲了哈，回家就想着记录下来

使用window.open打开的新页面都会创建一个新的window对象，在这个新的window对象的opener中保存着父窗口的window对象，所以我们可以在子窗口中使用父窗口window中的方法和属性，由此我们可以来这样操作：

这是父窗口：

<template>
    <div>
        <button @click="openNewWindow">点击开新窗口</button>
        <button @click="closeSonWin">关闭子窗口</button>
        
        <h1>{{a}}</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a:0,
            }
        },
        methods: {
            openNewWindow() {
                const sonWindow = this.$router.resolve({path:'/sonWindow'})
                window.addFunc = this.addFunc
                window.sonWinObj = window.open(sonWindow.href,'_blank')
                // console.log(newWindowObj);
            },
            addFunc(){
                this.a++
            },
            closeSonWin(){
                window.sonWinObj.close()
            }
        },
    }
    
</script>

在父窗口这个页面里面我们干的事有两件：

1.将父窗口中的addFunc保存在父窗口的window中；

2.将新窗口的window保留下来，也就是sonWinObj；

接着我们来看子窗口：

<template>
    <div>
        这里是子窗口
        <button @click="fatherAdd">触发父窗口的加法函数</button>
    </div>
</template>

<script>
    export default {
        methods: {
            fatherAdd() {
                window.opener.addFunc()
            }
        },
    }
</script>

子窗口的中window.opener保留的是父窗口的window，自然可以使用父窗口的方法

由此我们可以通过子窗口触发父窗口的方法达到父子通讯