天天看点

vue + ivew 强制刷新子组件

1.场景: 在某个页面需要添加一个提交数据的一个表单弹框,弹框中引入了一个子图片上传组件uploadimg,当数据提交完成之后,隐藏弹框并把表单数据重置(不刷新页面),但下次打开页面时图片上传组件上次添加的数据还是显示在弹框中,现在是需要将图片上传组件uploadimg强制刷新。

vue + ivew 强制刷新子组件

2.在父组件中给子组件定义一个判断值

​
  <Uploadimgs style="width: 400px;margin-top: 20px" ref="zanImg" v-if="showUploadimgs == true"></Uploadimgs>

​
           

3..在提交的方法中重新给这个判断值定义

this.showUploadimgs = false
           

4.然后在同一个方法$nextTick

this.$nextTick(() => {
              this.showUploadimgs = true;
            })
           

5.原理就是采用v-if会销毁组件并且重绘,这样就会重载组件达到刷新子组件的效果