遇到一个bug,组件不更新内容


解决办法

当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。

<template>
    <comp v-if="update"></comp>
    <button @click="reload()">刷新test1组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'test1',
    data() {
        return {
            update: true
        }
    },
    methods: {
        reload() {
            // 移除组件
            this.update = false
            // 在组件移除后,重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
            this.$nextTick(() => {
                this.update = true
            })
        }
    }
}
</script>

借用this.forceUpdate()强制刷新,但经过个人尝试,感觉还是没有v-if用着有效,

posted @ 2022-09-29 08:31  xuelin  阅读(31)  评论(0)    收藏  举报