使用vue進行開發(fā)時虽填,如果要刷新當前路由斋日,則調(diào)用router.go(0)方法即可。但是某些情況下恶守,我們可能要求僅僅刷新某個組件贡必,而不是路由,那么我們應(yīng)該怎么做呢衫樊?
1.使用this.$forceUpdate強制重新渲染
如果要在組件內(nèi)部中進行強制刷新,則可以調(diào)用this.$forceUpdate()強制重新渲染組件科侈,從而達到更新目的晋被。
<template>
<button @click="reload()">刷新當前組件</button>
</template>
<script>
export default {
name: 'comp',
methods: {
reload() {
this.$forceUpdate()
}
}
}
</script>
2.使用v-if指令
如果是刷新某個子組件,則可以通過v-if指令實現(xiàn)挂脑。我們知道欲侮,當v-if的值發(fā)生變化時,組件都會被重新渲染一遍威蕉。因此,利用v-if指令的特性牍戚,可以達到強制刷新組件的目的娩贷。
<template>
<comp v-if="update"></comp>
<button @click="reload()">刷新comp組件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
name: 'parentComp',
data() {
return {
update: true
}
},
methods: {
reload() {
// 移除組件
this.update = false
// 在組件移除后甜熔,重新渲染組件
// this.$nextTick可實現(xiàn)在DOM 狀態(tài)更新后哑了,執(zhí)行傳入的方法炕淮。
this.$nextTick(() => {
this.update = true
})
}
}
}
</script>