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

Vue在父组件点击条件筛选的时候刷新子组件数据

比如像点击这块班级条件的时候下面的图表数据，就是不同平台的完成率数据要更新

下面这块数据是使用的组件,代码如下：

<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会销毁组件并创建一个新组件。