前言:

在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件。

官网是这样说的:

vue强制刷新组件的方法示例

可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用,

vue强制刷新组件的方法示例

第一个打印结果

vue强制刷新组件的方法示例

第二个打印结果

         vue强制刷新组件的方法示例

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

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

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

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

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

vue强制刷新组件的方法示例

2.初始v-if=isrefresh

vue强制刷新组件的方法示例

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

vue强制刷新组件的方法示例
/************************************************************************************************************************************/ 

PS:vue 强制刷新子组件

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

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“vue强制刷新组件的方法示例”

暂无“vue强制刷新组件的方法示例”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。