1.把一个组件重置到初始状态是一个常见的需求,推荐的作法有两种,一种是父组件重置子组件的 prop,另外一种是子组件暴露一个重置的方法供父组件调用。但有些时候,子组件既没有提供重置的方法,也没提供 prop 来重置本身的状态。更重要的是,这个子组件咱们还动不了。因而咱们就须要一种 hack 的方式来强制子组件重置到初始状态。方法以下vue
// 原理就是:采用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 在切换时,元素及它的绑定数据和组件都会被销毁并重建