vue刷新子组件数据。Vue在父组件点击条件筛选的时候刷新子组件数据。vue如何让子组件重新渲染 电脑版发表于：2022/5/18 15:52 ### 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会销毁组件并创建一个新组件。
