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> |