vue如何做到只刷新当前组件不刷新整个页面
程序开发
2023-09-15 21:32:57
文章目录
1.前言
我们有时候会有这种需求(比较少)，在项目种v-for应该是用的比较多的，如果数据改变了，页面会自动更新，因为设置了key，所以和上一次数据相同的不会刷新，只刷新改变了的数据，但是有些时候会需要每次数据改变之后都需要数据全部更新，你可以会想到直接让页面直接刷新呗，这样是可以，但是页面会闪一下，体现不好， 我项目中正好就有这样的需要求，因为v-for的是多个iframe,每个iframe都是个单独的页面，每个页面都是海康的一个摄像机，到每次导航切换的时候都需要重新reload iframe 来保证每个摄像头都重新加载，因为会存在这样的情况，当有个场景是显示所有摄像头，另外个场景是其中几个摄像头，当这个场景切换到所有场景就会有相同的数据（不重新加载iframe），为了保证所有的iframe重新加载，所以v-for每次都需要重新加载数据。
2.思路
主要思路是用到v-if,因为v-if在初始渲染时条件为假，则什么也不做—直到条件第一次变为真时，才会开始渲染条件块。如果多次切换每次都会重新渲染（开销比较大），一般这种情况都会用v-show，但是为了需求没办法（不过海康的rtsp流控件也有问题，必须一个一个加载，如果4个设备，必须先加载第一个，然后加载第二个，同时加载必须要给延时，这个延时没把握好也会导致某个视频播放不了），但是项目中也不会频繁切换！
//让monitorVos设备列表重新加载
methods: {async reload() {this.isReload = false;await new Promise(resolve => {this.$nextTick(() => {resolve();this.isReload = true;});});},async filterMonitorVos(value) {//切换tab时 隐藏大的预览界面this.showFullScreen = false;this.toolShow = false;//展示被选中的类型的摄像头列表this.monitorVos = this.oldMonitorVos; //让全部的摄像头数据进行检索if (value == "all") {await this.reload();this.initCameraData(this);return;}let newList = [];this.monitorVos.forEach((e, index) => {if (value == e.monitorType) {newList.push(e);}});this.monitorVos = newList;await this.reload();this.initCameraData(this);}}watch: {//监听从获取父组件传来的值cameraType: async function(newVal) {await this.filterMonitorVos(newVal);}},
这里只列了核心代码,下面展示下项目效果！
标签：
上一篇：
html中a标签锚点定位双击跳转路径的问题
下一篇：
相关文章
-
无相关信息