背景: UI框架:antd vue,一个导入文件的功能,导入成功之后列表页的数据就会改变,但是我这边导入成功之后,打印的数据是更新了,页面却没有更新…
对此我的解决方法是导入成功之后,局部刷新列表组件,原理控制路由的显示隐藏(v-if),由路由的显示隐藏达到组件重新渲染的效果。
首先:我们在App.vue中,定义一个变量(isRouterAlive)为true,控制路由的显示隐藏,然后定义一个方法(reload),调用该方法之后组件重新刷新,然后必须要将这个方法定义在provide注入依赖,其子孙都可以用这个属性
代码如下:
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
<style>
#app {
height: 100%;
}
</style>
然后:在需要局部刷新的页面调用inject: [‘reload’],在导入成功之后再调一遍数据,后加入this.reload()就可以实现了
代码图片截图如下:
并且你获取数据需要使用async 和await ,只有将数据加载完之后在掉reaload方法才能有效,然后就可以实现导入成功时候,页面页刷新了。