vue爬坑之路——监听当前页面及新标签页面的事件方法

今天在开发项目时遇到在一个组件中操作完之后 需要其他组件的数据刷新

通俗的讲就是非父子组件之间的通信

其原理通过其中建立新的vue对象作为中间件来达到通信的目的

具体操作是这样的：

1、创建一个新的global.js文件 来初始化这个global Vue对象

import Vue from 'vue'
export const global = new Vue()

2、在调用方组件使用方法

import { global } from '@/utils/global'
global.$emit('getUndoList') 

// getUndoList 为这个事件的key值 可设置为任意值

3、在被调用方使用方法

在引入完js之后 在created或者mounted 方法中写入 监听事件

global.$on('getUndoList', () => {
  //组件其他方法
})

　这样就可以了

 

在使用完这个发现只能在一个页面中有效 无法监听到其他标签页的具体操作

然后我就百度vue 监听其他标签页的方法

参考：https://blog.csdn.net/weixin_34167819/article/details/91369193

其中有说到 使用localStorage 存储到浏览器临时变量中的方法

但是这并不能监听到其他标签页的事件

无意间看到这篇文章 https://blog.csdn.net/ju__ju/article/details/101263914

使用localStorage + 计时器来监听事件

于是有了想法

在页面开始时启动监听器监听localStorage的值

　

 

新标签页在提交时 设置localStorage的值为true

   

 

 此时监听器监听到localStorage变化 并设置为false 监听结束

  

 

 这样操作能保证只在需要的时候使用计时器 保证资源不浪费

到此 vue 单页面通信 和多标签页通信都顺利解决

完结撒花