vue 实现局部组件刷新

在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下：

1、 provide / inject 方法

使用 v-if 方法来控制 router-view 的显示隐藏
在 App.vue 页面

<template>
  <div id="app">
    <router-view v-if="isActive"/>
  </div>
</template>
<script>
export default {
    
    
	name: 'App',
	provide(){
    
    
		return {
    
    
	      reload: this.reload;
	    }
	},
	data(){
    
    
		isActive:true
	},
	method:{
    
    
		reload(){
    
    
			this.isActive = false;
			this.$nextTick(() => ){
    
    
				this.isActive  = true;
			}
		}
	}
}
</script>

然后再用到的页面引入，然后使用

export default {
    
    
	inject:['reload'],
	method:{
    
    
		refresh(){
    
    
			this.reload();
		}
	}
}
</script>

2、利用 v-if 直接操作组件

<div v-if='isShow'> ...... <div>
export default {
    
    
	data(){
    
    
		isShow:true
	},
	method:{
    
    
		refresh(){
    
    
			this.isShow = false;
			this.$nextTick(() => ){
    
    
				this.isShow = true;
			}
		}
	}
}
</script>

3、利用 key 值的变化触发组件更新

vue 的虚拟 DOM 算法在比对 Vnode时会用到 key 作为唯一标识，key 值变了该元素就会被重新渲染。

<div :key='keyNum'> ...... <div>
export default {
    
    
	data(){
    
    
		keyNum:0
	},
	method:{
    
    
		refresh(){
    
    
			this.keyNum++;
		}
	}
}
</script>