vue中两个没有关系的页面如何通讯

最新推荐文章于 2024-06-27 14:44:06 发布

云卷云舒%

最新推荐文章于 2024-06-27 14:44:06 发布

阅读量618

点赞数 2

分类专栏： vue 文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_39290323/article/details/129378044

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章描述了一位开发者在Vue应用中遇到的问题，即从A页面打开的B页面表单提交后，如何将数据传回A页面。尝试使用Vuex结合vuex-persistedstate、event-bus、localStorage监听以及postMessage等方法均未成功。最终，通过监听localStorage的变更实现了数据从B页面到A页面的传递。

摘要由CSDN通过智能技术生成

A页面中的一个子组件点击按钮跳转到B页面，B页面是在A页面窗口之上新开的窗口。B页面中是一个表单，提交后关闭B页面，同时A页面中要渲染B页面选择的数据。

尝试了以下办法:

使用vuex+vuex-persistedstate，B页面监听vuex中的数据，失败

使用event-bus，监听不到，失败

重写localStorage的setItem方法，window监听，失败

使用postMessage，依旧监听不到，失败

解决办法：使用原生js监听缓存

B页面存储数据

      localStorage.setItem('categoryData', JSON.stringify(this.selectedData));

A页面mounted中监听

  mounted() {
    window.addEventListener('storage', (event) => {
      if (event.key === 'categoryData') {
        console.log(JSON.parse(event.newValue));
        this.subjectData = JSON.parse(event.newValue);
      }
    });
  },