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 相关文章推荐
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
js中document.write的那点事
Dec 12 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 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
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
yii中widget的用法
2014/12/03 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jquery插件之easing使用
2010/08/19 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
微信小程序image图片加载完成监听
2019/08/31 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python实现文本文件合并
2015/12/29 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
合作经营协议书
2014/04/17 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
react antd实现动态增减表单
2021/06/03 Javascript
python图片灰度化处理的几种方法
2021/06/23 Python