热搜:m1 面试题 

vue怎么实现强制刷新组件

小白2024-04-20 09:30:01
第一.使用this.$forceUpdate强制重新渲染
    <template>
    <button @click="reload()">刷新当前组件</button>
    </template>
    <script>
    export default {
        name: 'comp',
        methods: {
            reload() {
                this.$forceUpdate()
            }
        }
    }
    </script>

第二.使用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可实现在DOM 状态更新后,执行传入的方法。
            this.$nextTick(() => {
                this.update = true
            })
        }
    }
}
</script>