VUE重新获取数据无效的情况下 刷新组件

今天在做东西的时候,刚好看到以前写的一段代码。上传完毕之后重新获取数据列表,但是使用的是window.location.reload();刷新,是刷新整个页面,感觉体验比较差。

不知道大家是怎么做的,一般都是重新获取一下数据VUE会自动重新渲染,很方便很舒服。

但是我这里就顺手写了重新获取数据,发现并没有反应,我也懒得去看为什么没有效果,因为项目赶时间就利用了改变<router-view> key的方式来实现刷新。

如下11行:使用emit触发父组件的reloadRouter,改变<router-view>的key

 1  this.$axios.post('http://****/Api/Prj/'+_this.dbcMsg.ajaxUrl,fd).then(res => {
 2       _this.uploadModelDialogVisible = false;
 3       _this.clearSelectFile();
 4       _this.$message({
 5         type: 'success',
 6         message: '上传成功',
 7       });
 8       setTimeout(()=>{
 9          //_this.getProjectPhaseData
10          //window.location.reload();
11          _this.$emit('reloadRouter');
12        },1000);
13  }).catch(res => {
14     console.log(res);
15 });
View Code

父组件代码如下

1 <router-view :childSetColor = "setColor" :key="setChange" @reloadRouter="reloadRouter"/>
2 
3 reloadRouter() {
4     this.setChange = new Date().getTime();
5 },
View Code

 

posted @ 2019-02-28 15:14  一根鸭脖喵  阅读(345)  评论(0编辑  收藏  举报