vue刷新子组件数据。Vue在父组件点击条件筛选的时候刷新子组件数据。vue如何让子组件重新渲染

4480人阅读 2022/5/18 15:52 总访问：3921398 评论：0 收藏：0 手机

分类: 前端

### Vue在父组件点击条件筛选的时候刷新子组件数据

比如像点击这块班级条件的时候下面的图表数据，就是不同平台的完成率数据要更新
![](https://img.tnblog.net/arcimg/aojiancc2/b8aca1092ff443df8f403d1ae469b38e.png)
下面这块数据是使用的组件,代码如下：
```
<sys-use-chart-teacher v-if="queryParms.classID" :class-id="queryParms.classID"/>
```
这里使用了一个v-if是因为需要等classID有数据了才加载出来这个子组件，如果不加这个的话可能会出现班级id还没有的情况下组件就加载了。并且绑定了一个班级id，班级id在上面切换的时候会变化，这里我们如何在班级id发生变化后重新去刷新子组件数据呢，方法还是很多的。

**我们这里使用watch 监听 props 中的值,当值发生变化后就重新去查询数据**
核心代码如下：
```
export default {
  props: {
    classId: {
      type: String,
      require: true,
      default: ''
    }
  }
  watch: { // watch 监听 props 中的值,当值发生变化后就重新去查询数据
    classId(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getEvaluateCompleteInfo()
        this.getLabRoomTotalInfo()
        this.getProductEduInfo()
      }
    }
  }
  ....
}
```

### vue如何让子组件重新渲染
上面那种情况除了可以使用watch来监听参数的变化，也可以让子组件重新加载的方法。

使用使用v-if、Vue内置的forceUpdate方法以及通过改变KEY值刷新都可以，推荐使用改变组件key刷新组件的方法，每次想重新渲染组件时，只需更新该组件的key即可。this.$forceUpdate()是强制更新视图。

**通过更新组件key刷新组件的方法示例：**
```
<template>
  <sys-use-chart-teacher :key="componentKey" v-if="queryParms.classID" :class-id="queryParms.classID"/>
</template>
  
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    freshComponent() {
      this.componentKey += 1;  
      //this.componentKey += new Date();
    }
  }
}
```
每当我们调用freshComponent时，绑定在组件上面的componentKey就会被改变，当componentKey值改变的时候，Vue会销毁组件并创建一个新组件。

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue刷新子组件数据。Vue在父组件点击条件筛选的时候刷新子组件数据。vue如何让子组件重新渲染

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}