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;
});
//这样的话就会完成强制刷新以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现简单瀑布流布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
Vue mixins提供了一个非常灵活的方式来分发Vue组件中的可复用功能,通过全局混入和局部混入,可以将预定义的方法、数据等混合到Vue组件中,这种技术可以简化代码,提高开发效率,并允许在不同组件间共享功能2024-09-09
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下2019-06-06
本文主要介绍了npm install sentry-cli失败的问题解决,文章首先描述了问题现象,然后分析了问题的原因,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
一款移动优先的Solid.js路由solid router stack使用详解
这篇文章主要为大家介绍了一款移动优先的Solid.js路由solid router stack使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
element ui el-calendar日历组件使用方法总结
这篇文章主要给大家介绍了关于element ui el-calendar日历组件使用方法的相关资料,elementui是一款基于Vue.js的UI框架,其中的日历组件calendar是elementui中非常常用的组件之一,需要的朋友可以参考下2023-07-07
VueJs中的shallowRef与shallowReactive函数使用比较
这篇文章主要为大家介绍了VueJs中的shallowRef与shallowReactive函数的使用比较解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了Vue循环中多个input绑定指定v-model实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于vue watch监控对象的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论