vue3关于两个不同页面(窗口)之间怎么传值通信、调用方法的问题解决
如果只是单纯的两个页面通信,就不需要写在app.vue里。
·
需求和问题:
由图一进入新打开的窗口图二,然后图二调用图一中代码中的方法,通过更多按钮跳到另一个页面,此时最后一个页面的左侧菜单不能立即更新
方法一: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里
更多推荐
已为社区贡献1条内容
所有评论(0)