vueCli3--父子窗口之间通信

demo-father.vue

<template>

  <div>

    <button @click="openNewWindow">点击开新窗口</button>

    <button @click="closeSonWin">关闭子窗口</button>

    <button @click="getSonWin">触发子窗口</button>

    <h1>{{ a }}</h1>

  </div>

</template>

<script lang="ts">

import router from "@/router";

import { defineComponent, ref } from "vue";

export default defineComponent({

  name: "AppDemoFather",

});

</script>

<script lang="ts" setup>

let a = ref(0);

let childWindow = ref();

function addFunc() {

  a.value++;

}

const openNewWindow = () => {

  const sonWindow = router.resolve({

    path: "/demo/child",

  });

  window.addFunc = (value: string) => {

    console.log(value);

    a.value++;

  };

  childWindow.value = window.open(

    sonWindow.href,

    "",

    "fullscreen=yes,scrollbars=yes,resizable=yes,top=10,left=10,toolbar=yes,menubar=yes"

  );

  childWindow.value.onload = () => {

    // const dd = childWindow.value.document.getElementById("btn");

    // if (dd) {

    //   dd.onclick();

    // }

  };

  // console.log(newWindowObj);

};

const closeSonWin = () => {

  childWindow.value.close();

};

const getSonWin = () => {

  const dd = childWindow.value.document.getElementById("btn");

  if (dd) {

    dd.onclick(a.value);

  }

};

</script>

<style scoped lang="scss"></style>

demo-child.vue

<template>

  <div>

    这里是子窗口

    <button @click="fatherAdd">触发父窗口的加法函数</button>

    <button style="display: none;" id="btn" @click="getList">触发子窗口的函数</button>

   

    <h1>{{ b }}</h1>

  </div>

</template>

<script lang="ts">

import { defineComponent, ref } from "vue";

export default defineComponent({

  name: "AppDemoChild",

});

</script>

<script lang="ts" setup>

const b = ref(0);

const init = () => {

  setTimeout(() => {

    const dd = document.getElementById("btn");

    if (dd) {

      dd.onclick = (value: any) => {

        b.value = value;

        alert("触发子窗口方法");

      };

    }

  }, 0);

};

init();

const fatherAdd = () => {

  window.opener.addFunc("1111");

};

const getList = () => {

  alert("触发子窗口方法");

};

</script>

<style scoped lang="scss"></style>