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

最新推荐文章于 2023-04-02 18:43:19 发布
最新推荐文章于 2023-04-02 18:43:19 发布
阅读量1.3k 收藏 1
点赞数
文章标签： vue监听html

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

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

其原理通过其中建立新的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 监听其他标签页的方法

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

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

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

于是有了想法

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

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

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

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

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

完结撒花

想要变成一棵树
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue监听键盘事件的快捷方法【推荐】
01-21
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符： <input v-on:keyup.13=submit> 对于一些常用键，还提供了按键别名： <input @keyup.enter=submit> ...
使用 vue 实例更好的监听事件及vue实例的方法
01-21
原文介绍了一种新增 vue 实例的方法，单独监听事件。这样代码书写较为简练，容易管理。 当监听如下事件的传统做法是： window.scrollX window.scrollY window.innerHeight window.innerWidth 通常需要书写很多...
html监听vue事件,vue中的v-on事件监听机制
weixin_29191081的博客
06-09 461
1、作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。2、常用事件：v-on:clickv-on:keydownv-on:keyupv-on:mousedownv-on:mouseoverv-on:submit....3、示例：5、v-on的缩写形...
vue 如何捕捉到其他页面的点击事件
weixin_44151065的博客
04-06 1787
在日常 前端开发中，我们可能遇到在某个页面中需要监听其他页面的按钮点击事件。 下面是思路，第一步 我们可以在main.js定义一个全局点击事件函数： Vue.prototype.globalClick = function(callback) { document.getElementById('editFile').onclick = function() { callback() } } 第二步 定义完全局函数之后，在需要的页面中调用这个全局函数： mounted: function() {
MFC C++监听网页窗口的点击超链接跳转问题(即打开新的浏览器窗口)
pengmutian的专栏
06-10 3201
使用MFC的CHtmlView类，注册ON_EVENT事件进行监听。 实现的基本代码是: BEGIN_EVENTSINK_MAP(CxxxView, CHtmlView) ON_EVENT(CxxxView, AFX_IDW_PANE_FIRST, DISPID_NEWWINDOW3, CxxxView::OnNewWindow3, VTS_PDISPATCH VTS_PBOOL VTS_U
vue监听某一标签状态变化
lotte
09-27 791
data(){ return{ observer: null, firedNum: 0,//触发次数 recordOldValue: { // 记录下旧的宽高数据，避免重复触发回调函数 width: '0', height: '0' } } } mounted(){ let_this=this letMutationOb...
vue监听html,vue监听，对页面变量进行监听
weixin_42527464的博客
06-07 462
摘要：html>监听ul,ol{list-style:none;}a{text-decoration:none;}*{margin:0;padding:0;}p{cursor:pointer;}输入长度是：{{length}}{{message}}varjiantin=newVue({el:'.container',data:{val:'',length:0,isS...
使用vue.js在页面内组件监听scroll事件的方法
12-29
思路：scroll在哪儿个...对于像我这样，只在页面的内的一个div内要监听的。 实现代码如下： 第一步：滑动的组件外层的div加 ref=”viewBox” 为了通过$refs获取dom元素 <!--设备列表--> <mu-refresh-con
vue监听input标签的value值方法
12-09
由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是：@input=”...
Vue监听事件实现计数点击依次增加的方法
12-29
1.实现计数器功能，每点击一次按钮，count值增加一或增加二，鼠标在cordinates行移动时会更新当前坐标，通过自定义函数或者stop属性禁止事件传播。 效果如下： 代码如下： <!DOCTYPE html><html><head...
Vue教程----监听事件（2）
Loyar的博客
07-07 697
继续上一章节的冒泡逻辑，我们首先来看几个基本的事件修饰符 .stop 停止修饰符（中断冒泡） .prevent 组织提交，在遇到form等表单提交后刷新页面时，阻止强制刷新页面 .capture 优先触发修饰符（出头鸟） .self 自己才能出发，从子节点响应而来，遇到该函数不触发 .once 只响应一次，有且仅有一次 用@click为例: @click.stop @click.prevent @click.self @click.once 1：stop修饰符 我们在不加修饰符的情
判断当前标签页是否激活
zmx781284440的博客
04-02 274
【代码】判断当前标签页是否激活。
vue事件监听
m0_64288523的博客
08-21 337
事件监听属性
04 Vue 高级
九儿九只的博客
10-03 329
目录一.Vue CLI1. 安装CLI错误和ESLint规范2. runtime-compiler和tuntime-only的区别3.Vue CLI3创建项目和目录结构4.VueCLI3配置文件的查看和修改二. 路由 Vue-Router1. 路由 一.Vue CLI 1. 安装CLI错误和ESLint规范 安装CLI错误可以试试：npm clean cache -force ESLint是js一个更严格的标准，如果不想使用可以在config/index.js中更改useEslint: false npm
监听视窗的激活状态
肖肖肖丽珠的博客
01-14 386
监听视窗的激活状态：一些网站，提醒你不能离开当前窗口 //窗口激活状态监听 letvEvent='visibilitychange'; if(document.webkitHidden!=undefined){ vEvent='webkitvisibilitychange'; } functionvisibilityChanged(){ if(document.hidden||document.webkitHidden){ doc...
vue工程中监听某个div类Dom变化
m0_37780367的博客
01-22 1456
场景 项目中使用到chart组件，当改变外层容器的宽高时，需要重新绘制resize图表。 方案 1、使用JS原生resize方法，但是只有针对windows窗口对象改变时生效； 2、使用echarts的resize方法 3、推荐：使用element-resize-detector 安装 第一步：vue-cli 项目中安装 npm install element-resize-detector 第二步：按需引入 const eleResizeDetector = require("element-resi
【vue学习】— 事件监听
scj1014的博客
01-08 1077
1. 事件监听 在前端开发中，我们经常需要监听浏览器的时间，例如点击、拖拽、键盘等操作。那么在vue中是如何监听事件的呢？那就是使用v-on指令 1.1 介绍 作用：绑定事件监听器 缩写：@ 预期：Function | Inline Statement | Object 参数：event 1.2 简单使用 我们可以在事件中写表达式 也可以将事件指向一个在methods中定义的函数 &lt...
Vue监听数据变化
Skty_ywh的博客
03-21 798
Vue监听数据变化
Vue中数据监听的方法
hdwddadsf的博客
06-25 8423
Vue中watch监听的简单使用
Vue 爬坑之路（二）—— 组件之间的数据传递
最新发布
05-26
好的，来谈谈 Vue 组件之间的数据传递。 1. 父组件向子组件传递数据 父组件可以通过 props 将数据传递给子组件，子组件通过 props 接收数据。 父组件： ``` <template> <div> <child-component :message="msg"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, data () { return { msg: 'hello' } } } </script> ``` 子组件： ``` <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script> ``` 2. 子组件向父组件传递数据 子组件可以通过 $emit 触发事件并传递数据，父组件通过 v-on 监听事件并接收数据。 子组件： ``` <template> <div> <button @click="sendMessage">发送消息</button> </div> </template> <script> export default { methods: { sendMessage () { this.$emit('send-message', 'hello') } } } </script> ``` 父组件： ``` <template> <div> <child-component @send-message="getMessage"></child-component> <div>{{ receivedMessage }}</div> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, data () { return { receivedMessage: '' } }, methods: { getMessage (message) { this.receivedMessage = message } } } </script> ``` 以上就是 Vue 组件之间的数据传递方式，希望能对你有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值