Vue.js删除子组件数据显示异常,重新销毁创建子组件

参考文档:https://blog.csdn.net/iceking66/article/details/78201885(回调)

https://segmentfault.com/q/1010000004000163(v-if)

一、问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常。

<section v-if="isrefresh" v-for="(sign,index) in signs">  
   <sign-card></sign-card>
</section>

二、问题原因:出现异常的数据不是响应式依赖,是从vuex读取的。通过测试发现,父组件删除数据,没有重新创建子组件,怀疑是子组件异常的数据是读取的缓存副本。

三、问题解决:根据v-if改变dom结构的特性,手动使子组件重新创建。

1.设置一个数据变量isrefresh=true

2.初始v-if=isrefresh

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

{
  this.isrefresh = this.isrefresh?false:true;
       this.$nextTick(function(){//DOM变化回调函数:v-for渲染已完成
          this.isrefresh = this.isrefresh?false:true;
       })
}

猜你喜欢

转载自blog.csdn.net/swiftlinlei/article/details/81001958