需求和问题:

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

方法一: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里

Logo

前往低代码交流专区

更多推荐