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

这篇文章主要为大家详细介绍了vue强制刷新组件的方法示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

前言：

 

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

官网是这样说的：

【图片暂缺】

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

【图片暂缺】

第一个打印结果

【图片暂缺】

第二个打印结果

         【图片暂缺】

一、问题描述：父组件通过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

【图片暂缺】

2.初始v-if=isrefresh

【图片暂缺】

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

【图片暂缺】
/************************************************************************************************************************************/ 

 

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;
    });
//这样的话就会完成强制刷新

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/6850-0.html

注：关于vue强制刷新组件的方法示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js