vue强制刷新组件的方法示例


Posted in Javascript onFebruary 28, 2019

前言:

在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件。

官网是这样说的:

vue强制刷新组件的方法示例

可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用,

vue强制刷新组件的方法示例

第一个打印结果

vue强制刷新组件的方法示例

第二个打印结果

         vue强制刷新组件的方法示例

一、问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常。

<code class="language-plain"><section v-if="isrefresh" v-for="(sign,index) in signs">  
  <sign-card></sign-card> 
</section></code>

 二、问题原因:出现异常的数据不是响应式依赖,是从vuex读取的。通过测试发现,父组件删除数据,没有重新创建子组件,怀疑是子组件异常的数据是读取的缓存副本。

三、问题解决:根据v-if改变dom结构的特性,手动使子组件重新创建。

1.设置一个数据变量isrefresh=true

vue强制刷新组件的方法示例

2.初始v-if=isrefresh

vue强制刷新组件的方法示例

3.删除时,配合$nextTick()DOM渲染回调函数,使子组件重新创建

vue强制刷新组件的方法示例
/************************************************************************************************************************************/ 

PS:vue 强制刷新子组件

把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。但有些时候,子组件既没有提供重置的方法,也没提供 prop 来重置自己的状态。更重要的是,这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下:

//   原理就是:采用v-if会销毁组件并且重绘,这样就会重载组件
// 子组件:自己封装的组件
  <IncomeStatistics v-if="DestroyIncomeStatistics == true"
              ref="IncomeStatisticsChild"></IncomeStatistics>
// 然后再父组件内的增删改查方法中操作,就好了
this.DestroyIncomeStatistics = false;
// 然后你的方法成功后
// Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
// 在vue的深入响应式原理中有解释:
// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
  this.$nextTick(() => {
     this.DestroyIncomeStatistics = true;
    });
//这样的话就会完成强制刷新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 #Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
Vue多组件仓库开发与发布详解
Feb 28 #Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 #Javascript
vue-cli3+typescript初体验小结
Feb 28 #Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 #Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
给交警的表扬信
2014/01/12 职场文书
迟到检讨书5000字
2014/01/31 职场文书
文化建设工作方案
2014/05/12 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Go语言编译原理之源码调试
2022/08/05 Golang