vue项目页面进行数据更新的三种方法

2023-10-29

1.场景

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

用vue-router重新路由到当前页面,页面是不进行刷新的
3.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

4.解决方法

provide / inject 组合

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
在这里插入图片描述

tableList.vue:

在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加…),直接this.reload()调用,即可刷新当前页面。
在这里插入图片描述

在这里插入图片描述

5.provide / inject 用法

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

==========================================

深入理解数据驱动

以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重。

获取列表方法
这里写图片描述
2.重新获取数据
这里写图片描述
6.这样再次调用获取数据,即可同步实现页面数据更新(不会重新刷新页面),同时保证有分页时,能够停留在当前页(刷新前如果是第二页,刷新后依然在第二页),

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue项目页面进行数据更新的三种方法 的相关文章

  • MySQL 中视图和表的区别以及联系是什么?

    两者的区别 1 视图是已经编译好的 SQL 语句 是基于 SQL 语句的结果集的可视化的表 而表不是 2 视图没有实际的物理记录 而基本表有 3 表是内容 视图是窗口 4 表占用物理空间而视图不占用物理空间 视图只是逻辑概念的存在 表可以及
  • 在微软任职近 20 年,Windows、Surface 负责人官宣将离职!

    整理 屠敏 出品 CSDN ID CSDNnews 9 月 19 日 据外媒 The Verge 报道 负责领导 Windows 开发和 Surface 产品线的微软首席产品官 CPO Panos Panay 即将离职 这一消息来得很突然
  • LaTex中把下标置于文本正下方的方法 (转载)

    转载一篇文章 因为我想打出 H z H 0 J m
  • C# 中的委托和事件(详解)

    C 中的委托和事件 委托和事件在 NET Framework 中的应用非常广泛 然而 较好地理解委托和事件对很多接触 C 时间不长的人来说并不容易 它们就像是一道槛儿 过了这个槛的人 觉得真是太容易了 而没有过去的人每次见到委托和事件就觉得
  • 渗透测试技术题(面试、笔试)

    本篇文章主要涉及一下几个方面 java view plain copy 对称加密非对称加密 什么是同源策略 cookie存在哪里 可以打开吗 xss如何盗取cookie tcp udp的区别及tcp三次握手 syn攻击 证书要考哪些 DVW
  • 优雅的代码命名规范,代码如诗

    优雅的代码命名规范 管理类命名 传播类命名 回调类命名 监控类命名 内存管理类命名 过滤检测类命名 结构类命名 常见设计模式命名 解析类命名 网络类命名 CRUD命名 其他 END 日常编码中 代码的命名是个大的学问 能快速的看懂开源软件的
  • “你已被移出穷人群”

    壹心理创作者 触角 本文转载自壹心理旗下最有料公众号 心理公开课 ID yixinligongkaike 01 关于 贫穷 我们受到的恐吓不下10000次 中国的年轻人 光是今年 受到贫穷的恐吓就可能不下10000次 一篇细致描绘北漂生活的
  • 去掉xcode源码末尾的空格【转载的这篇还没有具体操作过,希望对大家有用】

    去掉xcode源码末尾的空格 Dec 10th 2011 在用xcode开发的时候 很容易就在行末增加一些空格了 这些空格在上传到review board上后 就会被特别的颜色显示出来 因为一种好的编程风格是说 不应该在行末增加不必要的空格
  • S7-1200 PLC的数据类型

    S7 1200 PLC的数据类型 除了基本数据类型之外 还支持一些复杂的数据类型 包括结构数据类型Struct PLC数据类型UDT 数组Array 系统数据类型SDT 硬件数据类型DB ANY 参数数据类型Variant String和C
  • 解密蓝牙mesh系列

    转载自 蓝牙技术联盟 蓝牙mesh网络 低功耗 低功耗蓝牙 低功耗蓝牙 Bluetooth Low Energy 是一项相当成功的无线技术 如今已经很难找到不支持低功耗蓝牙的智能手机或平板电脑了 可以说它是可穿戴技术兴起的关键因素 在医疗设
  • jumpserver堡垒机 (资源)

    23 5 jumpserver介绍 官网www jumpserver org 跳板机概述 跳板机就是一台服务器 开发戒运维人员在维护过程中首先要统一登录到这台服务器 然后再登录到目标 设备迚行维护和操作 堡垒机概述 堡垒机 即在一个特定的网
  • Cache 和 Buffer 有什么区别

    Cache 和 Buffer 有什么区别 转载 talkwithtrend https mp weixin qq com s YsEOBVS7fXgrGXnXH1I0MQ Cache和Buffer简单的说 Cache是加速 读 而buffe
  • selenium的安装及使用介绍

    R爬虫之上市公司公告批量下载 selenium的安装及使用介绍 http yphuang github io blog 2016 03 01 Get Listed Company Announcement
  • 【转】机器学习--- 分类算法详解

    原文链接 http blog csdn net china1000 article details 48597469 感觉狼厂有些把机器学习和数据挖掘神话了 机器学习 数据挖掘的能力其实是有边界的 机器学习 数据挖掘永远是给大公司的业务锦上
  • Android Rxjava:最简单易懂的诠释 看这篇

    1 前言 Rxjava 具有链式调用 使用简单 事件与结果松耦合的特点 Rxjava 之所以深受欢迎它包含 非常多操作符 能通过 链式形 优雅整洁的代码几乎能实现所有的功能需求 本文特点 图多字少 逻辑简单 之前面试中被问了很多Rxjava
  • 硬盘故障时如何强制关机:Input/output error

    如果硬盘可能会出现锁死或坏道的故障 会造成SHELL命令的失效 包括 reboot powoff shutdown 用正常的命令是没法完成重启的 执行这些命令 会出现如下IO报错 reboot bash sbin reboot Input
  • D3DXMESHOPT_ATTRSORT

    Mesh的顶点和索引能够被重组以便能更有效的渲染mesh 当我们这样做时 我们说我们优化了一个mesh 我们可以使用下面的方法来进行优化 HRESULT ID3DXMesh OptimizeInplace DWORD Flags CONST
  • Shell 脚本中 '$' 符号的多种用法

    来源 JackTian 杰哥的IT之旅 https mp weixin qq com s XBu7G UxPs2dv6fsPXGq4w 通常情况下 在工作中用的最多的有如下几项 0 Shell 的命令本身 1 到 9 表示 Shell 的第
  • shell调用php脚本,并传递参数

    命令行执行带参数的php脚本 并取得参数 张映 发表于 2011 07 15 分类目录 php 一 为什么我们要在命令行下运行php脚本呢 个人理解 主要有二个原因 1 利用crontab去跑php 可以给服务器减压 当然在这里有一个条件
  • 解密蓝牙mesh系列

    转载自 蓝牙技术联盟 蓝牙mesh网络 友谊篇 低功耗蓝牙 Bluetooth Low Energy 是全球最具节能性的短距离无线通信技术之一 其低功耗的特性广受开发者和消费者赞誉 随着蓝牙mesh网络的推出 开发者可能想知道蓝牙mesh网

随机推荐

  • STM8中断的设置(ST Visual Develop和IAR环境下)

    以下以stm8s103为例介绍在ST Visual Develop和IAR环境下的中断设置 这两种只是环境不同其实中断向量是不会变的 先看一下数据手册 再结合芯片手册中中断向量映像表 如下图所示 结合起来的话我们就能够理解的 在用ST Vi
  • this.setState的详细用法

    1 为什么不要直接对state进行赋值 如果直接对this state复制是不会去更新视图的 this setState的原理是同一个队列来实现state的更新的 将需要更新的state放入到状态队列中 在一定时间段之后 合并并更新stat
  • 【计算机网络】网络层协议——IP协议基础教程详解!干货满满

    文章目录 计算机网络 网络层 IP协议详解 IP协议的格式 4位版本号 4位首部长度 8位的服务类型 16位总长度 分包组包 标识 片移量 标志 过程实例 8位生存时间 8位协议 16位首部校验和 源IP地址和目的IP地址 IP地址管理 网
  • django channels实战(websocket底层原理和案例)

    1 websocket相关 1 1 轮询 1 2 长轮询 1 3 websocket 1 3 1 websocket原理 1 3 2 django框架 asgi py在django项目同名app目录下 1 3 3 聊天室 django代码总
  • 法线向量扰动、副法线

    3D数学 学习笔记 9 凹凸映射 bump mapping 和切线空间 tangent space 凹凸映射和切线空间在图形学中也是用的较多的 下面给大家介绍下凹凸映射和切线空间 并和大家说下凹凸映射和切线空间的区别和优缺点 凹凸映射 bu
  • 深圳益百分稳健前行 在商业创新中寻找平衡点

    文 李永华 来源 螳螂财经 ID TanglangFin 遭遇舆论危机后 滴滴创始人之一柳青曾在微博上晒出程维的照片 并配文 一个在两周内瘦成一道闪电的男人 程维快速变瘦的背后是一个高速发展的巨头级企业面临巨大监管和舆论压力的写照 一边是庞
  • Entity Framework Core系列教程-4 DbContext

    Entity Framework Core DbContext DbContext类是Entity Framework Core的组成部分 DbContext实例代表与数据库的会话 可用于查询实体实例并将其保存到数据库 DbContext是
  • SQL注入代码实践(盲注-获取数据库名长度【数值型】)

    coding utf 8 Time 2022 4 4 16 19 Auth zhangxiang File GetLength Inject py IDE PyCharm Motto ABC Always Be Coding 获取数据库名长
  • STM32——USART串口

    文章目录 一 通信接口 二 串口通信 三 硬件电路 四 电平标准 五 串口参数及时序 六 STM32的USART外设简介 七 USART框图 八 USART基本结构 九 数据帧 十 起始位侦测和采样位置对齐 十一 数据采样 十二 波特率发生
  • 副高相当于副处吗_事业单位岗位工资副高职为何分为五六七级,调级时..._事业单位考试_帮考网...

    一般机关 事业单位工资制度和晋升等 各地都会按照国家人事部 财政部 国家计委 关于印发机关 事业单位工作人员正常晋升工资档次办法的通知 来制定当地的工作晋升等标准和规定 建议咨询当地的组织部门 1 五级职员 是指事业单位正处级别 根据试行办
  • PLY格式学习

    最近写论文为了使三维重建结果呈现的更加漂亮直观一些 尝试对三维空间数据进行表面重建 采用Poisson Reconstruction 点击打开链接 方法 该方法使用的数据格式为ply格式 Ply格式是Stanford Stanford Bu
  • 关于“Unable to establish loopback connection Connection timed out: connect”问题的解决方案参考

    前言 最近使用AS 3 0启动一个工程 在gradle同步的时候 出现了 Unable to establish loopback connection Connection timed out connect 的问题 在网上找了很久 主要
  • shell基础

    目录 shell脚本介绍 一 shell脚本是什么 二 为什么要学shell 而不是其他计算机语言 三 学习这门课程的优势 四 学了能干什么 五 学习什么内容 六 学习的技巧 七 成长路径 八 学习环境 编程语言与shell脚本 一 编程语
  • React 查找表格数据例子

    假设我们已经有了一个返回 JSON 的 API category Sporting Goods price 49 99 stocked true name Football category Sporting Goods price 9 9
  • 简单修改,让CI支持memcache

    CI默认只支持memcaced 今天在网上搜索了下 一些解决方案都是错的 经过ci源代码分析 给出一个正确的解决方案 1 复制driver目录下的memcachd php为memcache php 并且将memcached替换为memcac
  • Altium designer第二屏幕导致的问题

    由于之前笔记本电脑通过VGA线连接第二屏幕使用 但是在一些情况下第二屏幕不在 但是打开Altium designer相关窗口后还默认在第二屏幕 导致软件无法操作 解决方法 1 当Altium Designer 的某一窗口跑到另外一个显示屏上
  • 停用词(stop words)+TF-IDF实现

    一 什么是停用词 在汉语中 有一类没有实际意义的词语 比如组词 的 连词 以及 副词 甚至 语气词 吧 被称为停用词 一个句子去掉这些停用词 并不影响理解 所以 进行自然语言处理时 一般将停用词过滤掉 一般词表文件中每一行存储一个停用词 行
  • Linux版的CASTEP功能更强大,castep在linux下的安装步骤.docx

    castep在linux下的安装步骤 卸载 一 MS卸载 1 首先进入home msi Accelrys Materials Studio40 etc Gateway然后执行 msgateway control 18888 stop 即停掉
  • 服务器无法登录之迷——login界面无限循环

    本周遇到了一个很奇葩的问题 客户的一台服务器无论如何都无法登录到机器系统里面去 可以肯定的是输入的登录密码是完全正确的 但是输入密码后 总在login登录界面无限循环 今天抽空总结下这个问题的前因后果 登录异常现象 1 ssh登录成功后 会
  • vue项目页面进行数据更新的三种方法

    1 场景 在处理列表时 常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求 2 遇到的问题 用vue router重新路由到当前页面 页面是不进行刷新的 3 采用window reload 或者router go 0 刷新时 整个