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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 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源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP多态代码实例
2015/06/26 PHP
php 中的closure用法详解
2017/06/12 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
模拟select的代码
2011/10/19 Javascript
PHP守护进程实例
2015/03/06 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
四个太阳教学反思
2014/02/01 职场文书
文案策划求职信
2014/03/18 职场文书
2014年双拥工作总结
2014/11/21 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
自荐信模板大全
2015/03/27 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
Nginx动静分离配置实现与说明
2022/04/07 Servers