vue父组件数据更新,子组件重新渲染问题

2,432 阅读1分钟

前景

 有个应用场景,是点击标签后,重新请求数据,然后页面重新加载数据,数据类型是Object类型。

 遇到的问题是,数据重新请求更新后,页面没有重新加载新的数据。

 一开始以为是因为对Object类型数据的直接覆盖导致vue不能监听到数据的更新导致的,使用了$forceUpdate(),没有奏效。

解决

 后面想到,数据的更新发生在父组件,要更新的视图是在子组件,这样子在父组件使用$forceUpdate(),子组件没有更新也是正常的。

 所以,我们可以给子组件添加一个key,每次更新数据后,都改变一下这个key,这样子组件就会重新加载新的数据了。

代码

<template>
    <Child :key="timer" />
</template>

<script>
    changeData() {
        ...
        this.timer = new Date().getTime()
    }
</script>

结尾

本人菜鸟一个,对vue的掌握不是很深入,对问题的描述可能也不是很恰当,有不足之处,请指正 🙏