TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue刷新子组件数据。Vue在父组件点击条件筛选的时候刷新子组件数据。vue如何让子组件重新渲染
4519
人阅读
2022/5/18 15:52
总访问:
3947748
评论:
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}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}