1.使用v-if标记
<template>
<comp v-if="refresh"></comp>
<button @click="refreshComp()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
name: 'parentComp',
data() {
return {
refresh: true
}
},
methods: {
refreshComp() {
// 移除组件
this.refresh = false
// 在组件移除后,重新渲染组件
// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
this.$nextTick(() => {
this.refresh = true
})
}
}
}
</script>
2.forceUpdate
组件内置$forceUpdate方法,使用前需要在配置中启用。
在main.js中进行配置
import Vue from 'vue'
Vue.forceUpdate()
组件中
<template>
<div>
<button @click="handleUpdateClick()">Refresh当前组件</button>
</div>
</template>
export default {
methods: {
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
}
}
3.使用key
属性
给组件添加一个动态的key
属性,当key
属性的值发生变化时,Vue会强制重新渲染该组件。
<template>
<div>
<my-component :key="componentKey"></my-component>
<button @click="refreshComponent">刷新组件</button>
</div>
</template>
<script>
export default {
data() {
return {
componentKey: 0
};
},
methods: {
refreshComponent() {
this.componentKey += 1;
}
}
};
</script>