【无标题】vue 强制刷新组件的方法

LQ271524

于 2022-02-17 17:15:06 发布

阅读量309

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/LQ271524/article/details/122987593

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue中强制刷新组件的两种常见策略。方案一是利用`v-if`和`$nextTick`，在数据变更后销毁并重新渲染组件。方案二是通过改变组件的`key`值，触发Vue的自动重新渲染机制。这两种方法可以帮助开发者在特定场景下确保组件更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 强制刷新组件的方法

方案一

当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题。

<template>
 <third-comp v-if="reFresh"/>
</template>
  
<script>
 export default{
 data(){
  return {
  reFresh:true,
  menuTree:[]
  }
 },
 watch:{
  menuTree(){
   this.reFresh= false
   this.$nextTick(()=>{
  		this.reFresh = true
  	})
  }
 }
}
</script>

方案二

通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。

<template>
 <third-comp :key="menuKey"/>
</template>
  
<script>
 export default{
 data(){
  return {
    menuKey:1
  }
 },
 watch:{
  menuTree(){
 	++this.menuKey
  }
 }
}
</script>