脚本宝典收集整理的这篇文章主要介绍了

vue强制刷新子组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1.把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。但有些时候,子组件既没有提供重置的方法,也没提供 prop 来重置自己的状态。更重要的是,这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下

//     原理就是:采用v-if会销毁组件并且重绘,这样就会重载组件
// 子组件:自己封装的组件
   <IncomeStatistics v-if="hackReset == true"></IncomeStatistics>
// 然后再父组件内的增删改查方法中操作,就好了
this.hackReset = false;
// 然后你的方法成功后
// Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
// 在vue的深入响应式原理中有解释:
// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
   this.$nextTick(() => {
          this.hackReset = true;
        });
//这样的话就会完成强制刷新

v-if 在切换时,元素及它的绑定数据和组件都会被销毁并重建

总结

以上是脚本宝典为你收集整理的

vue强制刷新子组件

全部内容,希望文章能够帮你解决

vue强制刷新子组件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过