在vue项目中刷新页面下的子组件

在vue项目中刷新子组件

1.利用v-if
v-if 可以销毁或者重建一个DOM 利用这一点 当 v-if 为 true 时可以触发Vue 创建前后 挂载前后 的生命周期 当 v-if 为 false 时可以触发Vue的 销毁前后 的生命周期

利用这一特性可以重载刷新子组件 (不推荐 因为可能会短暂让节点消失)

<template>
	<div>
		<button @click="refresh()">点我刷新son</button>
		<son v-if="show" />
	</div>
</template>
<script>
export default {
    data() {
        return {
            show: true
        }
    },
    methods: {
        refresh() {
        //删除节点
            this.show = false;
            let out = setTimeout(() => {
            //重新渲染节点
                this.show = true;
                clearTimeout(out)
            }, 0)
        }
    }
}
</script>

2.利用key
当一个Vue组件的key值发生改变时 Vue会认为这是一个新的组件 需要重新渲染DOM 这是因为Vue中的key是用来标识虚拟DOM节点的唯一性的 如果key值改变 那么Vue会认为这是一个新的节点 需要重新创建并渲染

在这里可以利用key特性可以给节点加上一个动态的key 来强制重新渲染一个组件 这也可以用来刷新子组件(这种方法更简单 而且不会出现组件短暂消失)

<template>
	<div>
		<button @click="refresh()">点我刷新son</button>
		<son :key="keyInfo" />
	</div>
</template>
<script>
export default {
    data() {
        return {
        //动态的key
            keyInfo: 1
        }
    },
    methods: {
        refresh() {
        //改变key值强制重新渲染
            this.keyInfo += 1
        }
    }
}
</script>