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

需求和问题：

由图一进入新打开的窗口图二，然后图二调用图一中代码中的方法，通过更多按钮跳到另一个页面，此时最后一个页面的左侧菜单不能立即更新

方法一：bus模式

1.新建文件 utils/bus.ts

import mitt from 'mitt';
export const bus = mitt();

2.在两个文件中都引utils/bus.ts文件

import {bus} form './utils/bus.ts'

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

const click=()=>{
    bus.emit('方法名'，'参数')
}

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

onMounted(()=>{
   bus.on("方法名", (data) => {
    handleMenu(data); //需要调用的方法
  });
})

PS:如果是同一个项目两个不同页面 可以在两个页面之间使用这个方法，但如果两个页面之间有通过bus调用其他公共方法,被调用方就需要写在app.vue 中，否则取不到相应的方法。比如下边的代码，我们要调用handleMenu方法，但是该方法中又调用了其他页面传过来的方法，就会导致有时候取不到useallResetMenu方法中的内容，这时候就需要把handleMenu方法放到app.vue里通过bus.on绑定

方法二：window.opener的运用

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

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

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

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

  onMounted() {
    window['getData']=()=>{
      getData()
    }
  },
 const getData =()=>{
      
          //获取渲染数据
      }

使用方法二测试后发现第一次按图中的步骤操作，菜单不会变化，第二次进入菜单就变化了。猜测应该同bus的方式一样，也应该写在app.vue里。

最后

如果只是单纯的两个页面通信，就不需要写在app.vue里