美文网首页
vue 强制刷新子组件

vue 强制刷新子组件

作者: 郝艳峰Vip | 来源:发表于2018-11-01 14:10 被阅读0次

写在前面


把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 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 强制刷新子组件

    写在前面 把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 prop,另一种是...

  • VUE强制刷新子组件

    问题: 因为父组件的tab切换, 导致子组件一直存在, 没有刷新. 所以当父组件传值更新时, 子组件无法获取到. ...

  • 2022-05-05 信雅达

    1. 强制刷新子组件 2. 兄弟组件之间通信 3. mixins 4. Vue进阶(六十二):理解$nextTic...

  • vue 强制刷新组件

    vue 强制刷新组件 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情...

  • vue 强制刷新组件

    使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅...

  • vue强制刷新子组件的数据

    一、问题:在父组件里面加载了自定义的子组件,父组件添加数据后,子组件的数据怎么跟着刷新??? 二、解决方法: 1、...

  • vue中刷新组件(强制组件刷新的方法)

    因为直接拖的element-ui的el-dialog,所以用的是 :visible.sync="dialogVis...

  • cocos creator RichText组件类似Label.

    我用的是2.4.1版本 一. Label组件强制刷新的方法 二. RichText组件强制刷新的方法

  • vue 强制刷新组件重新渲染

    问题:子组件渲染的数据是在子组件的函数内处理过,但是父组件将数据更新后,子组件渲染的数据是直接更新的数据,并未触发...

  • vue 父组件 监听子组件 事件 (强制刷新子组件的)

    子组件改变父组件传递的 参数 不刷新 ① 子组件上 添加 v-if ② 父组件 监听数据 具体实现 子组件 父组件

网友评论

      本文标题:vue 强制刷新子组件

      本文链接:https://www.haomeiwen.com/subject/mwcxxqtx.html