vue主动刷新页面及列表数据删除后的刷新实例
1.场景
在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。
2.遇到的问题
1. 用vue-router重新路由到当前页面，页面是不进行刷新的
2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好
3.解决方法
provide / inject 组合
作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
App.vue:
声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
tableList.vue:
在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()调用，即可刷新当前页面。
4.provide / inject 用法
provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
==========================================
深入理解数据驱动
以上算是开发过程中的一个坑，用了一段时间，今天再读代码的时候，感觉被坑的很严重。
1. 获取列表方法
2.重新获取数据
3.这样再次调用获取数据，即可同步实现页面数据更新（不会重新刷新页面），同时保证有分页时，能够停留在当前页（刷新前如果是第二页，刷新后依然在第二页），
即其他查询条件保持不变，体验效果好。
以上这篇vue主动刷新页面及列表数据删除后的刷新实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在现代 web 应用开发中,前端和后端的无缝协作至关重要,借助 Firebase 等云计算解决方案,前端开发者可以轻松实现数据存储与实时更新,本文将为大家详细介绍如何利用 Vue 3 的 Composition API 和 Firebase 实现后台数据存储,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue实现跨域的方法,结合实例形式分析了vue.js跨域的原理与相关实现技巧,需要的朋友可以参考下2019-05-05
详解vue-router的Import异步加载模块问题的解决方案
这篇文章主要介绍了详解vue-router的Import异步加载模块问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
本文主要介绍了el-menu使用递归组件实现多级菜单组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Dialog通常是指在Vue.js 3.x版本中使用的对话框组件,它是一个轻量级、易集成的弹窗插件,用于创建通知、确认消息、输入表单等交互场景,最近项目中遇到了全局挂载Dialog的需求,所以本文给大家介绍了Vue3全局挂载Dialog组件的方法,需要的朋友可以参考下2024-12-12
今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue+element实现输入密码锁屏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇vue之debounce属性被移除及处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
双向数据绑定原理主要运用了发布订阅模式来实现的，通过Object.defineProperty对数据劫持，触发getter，setter方法，这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下2023-02-02
本文主要介绍了vue前端RSA加密java后端解密的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论