vue 全局定时更新 轮询

首先需要在最外层的父组件定义一个刷新的时间 初始值为nulll, 在定义一个新时间用于监听状态的变化。

data () {return {dataTime: 0,inverterMonTimer: null, // 设置刷新时间 2 分钟一次}},

然后再钩子函数中执行定义封装的方法

mounted(){this.getInverterMonTimer()
},
记得清空定时器beforeDestroy(){if (this.inverterMonTimer) {clearInterval(this.inverterMonTimer);this.inverterMonTimer = null;}},methods:{getInverterMonTimer () {// 判断定时刷新是否存在,存在先清除if (this.inverterMonTimer) {clearInterval(this.inverterMonTimer);this.inverterMonTimer = null;}// 实现轮询 两分钟执行一下this.inverterMonTimer = window.setInterval(() => {this.dataTime = new Date().getTime();}, 120000);},}

然后再 template 中找到我们的父组件 component 把时间穿进去,在子页面接收并监听这个时间,去触发接口更新后,每间隔时间查询更新接口。

  <component:is="item.is"ref="component":echartsId="item.id":style="{background: item.color, overflow: 'hidden'}":dataw="item.w":datah="item.h":dataInfo.sync="item.dataInfo":dataTypeList.sync="item.dataTypeList":dataTime="dataTime" // 这个是传的的时间></component>

在需要的子组件中接收props:{}

 props:{dataTime:{type: Number,default:() => {return 0}}},
watch: {dataTime: {immediate: true,handler (val) {this.getCoalTrackData() //}}},
mounted () { this.getCoalTrackData() // 页面加载后接口调取}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode刷题--- 目标和

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…

ECMAScript基础入门

ECMAScript&#xff0c;通常简称为 ES&#xff0c;是标准化的JavaScript语言规范。以下是一些ECMAScript基础入门的关键概念和特性&#xff1a; 1. **变量**&#xff1a; - ECMAScript是弱类型语言&#xff0c;这意味着你不需要预先声明变量的类型&#xff0c;变量可以存储…

TOGAF—架构(Architecture)项目管理—详细指导意见

本节描述了开发企业架构时要使用的详细项目管理方法。本节的目标受众是已经熟悉 TOGAF 标准并领导架构项目的企业架构师。 本节分为几个小节,这些小节描述了以下方法: 架构 项目启动,包括 ADM 阶段 A 的项目管理活动以及项目管理方法的项目启动和“启动”活动体系结构 项目…

设计模式之-建造者模式通俗易懂理解,以及建造者模式的使用场景和示列代码

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…

基于SSM的剧本杀预约系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的剧本杀预约系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring Sp…

easyrecovery数据恢复软件15安装下载免注册版本下载

说起数据恢复软件&#xff0c;相信没有小伙伴不知道easyrecovery这个软件吧&#xff0c;该软件具有快捷、高效、便捷的特点&#xff0c;且提供的功能也非常全面&#xff0c;不仅可以恢复各样被删除的文件、视频、图片等&#xff0c;还可以支持SD卡数据恢复&#xff0c;TF卡等各…

系列一、MQ简介

一、MQ简介 1.1、概述 MQ&#xff08;Message Queue&#xff09;&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件&#xff0c;是一套提供了消息&#xff08;消息即数据&#xff0c;一般消息的体量不会很大&#xff09;生产、存储、消费全过程的API软…

第11章 GUI Page421~422 步骤六 支持文字

运行效果&#xff1a; 关键代码&#xff1a; 新增头文件&#xff1a; //item_text.hpp #ifndef ITEM_TEXT_HPP_INCLUDED #define ITEM_TEXT_HPP_INCLUDED #include "item_i.hpp"class TextItem : public IItem { public:TextItem(): _startPosition(0, 0), _endPos…

shardingjdbc增加动态数据源(用于解决其不支持的SQL等)

1.配置文件 spring: #动态数据源引入dynamic:strict: truedatasource:ds:driver-class-name: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSourceurl: ${secret.datasource.url}username: ${secret.datasource.username}password: ${secret.datasource.pa…

百马百担c语言编程

以下是一个百马百担问题的C语言编程实现&#xff1a; #include <stdio.h>int main() {int n, m, k;scanf("%d%d%d", &n, &m, &k);int a[n], b[m];for (int i 0; i < n; i) {scanf("%d", &a[i]);}for (int i 0; i < m; i) {…

记录每日LeetCode 1962.移除石子使总数最小 Java实现

题目描述&#xff1a; 给你一个整数数组 piles &#xff0c;数组 下标从 0 开始 &#xff0c;其中 piles[i] 表示第 i 堆石子中的石子数量。另给你一个整数 k &#xff0c;请你执行下述操作 恰好 k 次&#xff1a; 选出任一石子堆 piles[i] &#xff0c;并从中 移除 floor(pile…

【华为鸿蒙系统学习】- 如何利用鸿蒙系统进行App项目开发|自学篇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 创建鸿蒙第一个App项目 项目创建 工程目录区 预览区 运行Hello World 基本工程目录 ws:工…

信号与槽QT4和QT5的区别

信号与槽QT4和QT5的区别 Qt4 connect(btn, SIGNAL(clicked()), this, SLOT(close()));在 Qt 4 中&#xff0c;信号和槽的连接使用了一种不同的语法&#xff0c;这是 Qt 框架特有的&#xff0c;利用了 Qt 的元对象系统&#xff08;Meta-Object System&#xff09;。Qt 4 中连接…

关于“Python”的核心知识点整理大全36

目录 13.4.4 向下移动外星人群并改变移动方向 game_functions.py alien_invasion.py 13.5 射杀外星人 13.5.1 检测子弹与外星人的碰撞 game_functions.py alien_invasion.py 13.5.2 为测试创建大子弹 13.5.3 生成新的外星人群 game_functions.py alien_invasion.py …

Zookeeper-应用实战

Zookeeper Java客户端实战 ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。 ZooKeeper官方的Java客户端API。 第三方的Java客户端API&#xff0c;比如Curator。 ZooKeeper官方的客户端API提供了基本的操作:创建会话、创建节点、读取节点、更新数据、…

7ADC模数转换器

一.模数转换原理 ADC模拟-数字转换器可以将引脚上连续变化的模拟电压转换成内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁。另外一种是DAC既是与前面相反&#xff0c;如PWM波&#xff0c;由于PWM电路简单且没有额外的功率损耗&#xff0c;更适用于惯性系统的…

整个python脚本解压缩:

# 导入zipfile模块&#xff0c;用于处理zip文件 import zipfile # 导入os模块&#xff0c;用于处理文件和目录 import os # 指定要解压缩的目录 dir_name "D:/test" # 指定压缩文件的扩展名 extension ".zip" # 使用os.walk()遍历目录及其子目录中的所…

损失函数,代价函数,梯度,优化器,学习率,学习率调度器

这些是机器学习中的概念。把这些概念迁移到CV领域要进行一定的抽象。 首先损失&#xff0c;损失是一组参数拟合出来的样本的预测值和样本的真实值之间的差异&#xff0c;损失是用来度量这种差异的&#xff0c;根据不同的拟合权重参数全局有一个对应的损失值&#xff0c;损失后…

随机问卷调查数据的处理(uniapp)

需求&#xff1a;问卷调查 1.返回的数据中包含单选、多选、多项文本框、单文本框、图片上传 2.需要对必填的选项进行校验 3.非必填的多项文本框内容 如果不填写 不提交 表单数据格式 res{"code": 0,"msg": null,"data": [{"executeDay&…

二叉搜索树、AVL、红黑树、B树

文章目录 二叉搜索树2. avl树3. 红黑树 b树和b树比较适合与磁盘打交道的&#xff0c;磁盘操作耗时&#xff0c;这些树 矮&#xff0c;红黑树、avL树高&#xff0c;比较适合与内存打交道。 二叉搜索树 找一个节点的前驱和后继&#xff1a; 前驱&#xff1a;如果节点有左子树&a…