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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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之第五天
2006/10/09 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python读取mysql数据绘制条形图
2020/03/25 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
简述数组与指针的区别
2014/01/02 面试题
中科方德软件测试面试题
2016/04/21 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
酒店总经理工作职责
2013/12/13 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
岗位工作说明书
2014/07/29 职场文书
学校个人对照检查材料
2014/08/26 职场文书
个人党性分析总结
2015/03/05 职场文书
学前教育见习总结
2015/06/23 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python