vue 手动/局部刷新组件

使用场景

点击按钮（或某变量改变时），在不刷新整个页面的情况下，局部刷新（重绘）图表，或者重新加载子组件。

实现方案

1. 在需要局部刷新的组件上，加上 v-if = "show" ，show的默认值为 true , 这样第一次渲染页面时，该组件能正常显示

2. 在点击事件中，先将 show 变为 false ，然后在 this.$nextTick 中将 show 变为 true , 这样便实现了组件的局部刷新

methods: {
    update() {
        this.show = false;
        this.$nextTick(
            () => {
                this.show = true
            }
        )
    }
},

完整的范例代码

父组件

<template>
    <div>
        <button @click="update">刷新test1</button>
        <Test1 v-if="show"></Test1>
    </div>
</template>
<script>
    import Test1 from './test1'

    export default {
        components: {Test1},
        data() {
            return {
                show: true,
            }
        },
        methods: {
            update() {
                this.show = false;
                this.$nextTick(
                    () => {
                        this.show = true
                    }
                )
            }
        },
    }
</script>
<style scoped>
</style>

子组件 test1

<template>
    <div>test1</div>
</template>
<script>
    export default {
        name: "test1",
        mounted() {
            alert("正在渲染test1")
        }
    }
</script>
<style scoped>
</style>