您现在的位置是:首页 > Javascript
当前栏目
Vue 组件强制刷新方式
2023-03-31 10:41:42 时间
需求
为实现动态页签组件,根据页签的类型获取对应的component。如视图类型的页签,只用于数据显示,不做任何增删查改;**多对多类型 **的页签,将实现对象与对象之间的绑定。每个component有不同的业务逻辑,自然组件封装的方式也不一样。
问题
可能某一个对象存在多个相同类型的页签,这样相同类型页签之间进行来回点击时,页签内的数据没有发生改变。
分析
组件地址相同时,来回点击存在缓存,页签相关的数据不会进行刷新。
源码简单介绍
activeComponent
通过 计算属性 根据 页签名称 动态获取对应的组件地址。
activeTabData
通过 计算属性 根据 页签名称 动态获取当前页签对应详细参数,如 tab-object-id
、tab-id
等
<template v-if="tabsList.length && tabName">
<component
:is="activeComponent"
:id="id"
:ref="activeComponent"
:instance-id="id"
:tab-type="activeTabData.type"
:tab-object-id="activeTabData.tabObjectId"
:tab-id="activeTabData.id"
:tab-unicode="activeTabData.unicode"
:tab-data="activeTabData"
></component>
</template>
解决
通过改变一个变量来实现组件的强制刷新。但要注意的是,只要当key的值改变,组件就会自动刷新,所以key的值可以是任何类型,只要唯一即可。
<template v-if="tabsList.length && tabName">
<component
:is="activeComponent"
:key="activeTabData.unicode"
:id="id"
:ref="activeComponent"
:instance-id="id"
:tab-type="activeTabData.type"
:tab-object-id="activeTabData.tabObjectId"
:tab-id="activeTabData.id"
:tab-unicode="activeTabData.unicode"
:tab-data="activeTabData"
></component>
</template>
其他解决方法
this.$forceUpdate()
子组件的强制刷新方法。当需要对当前组件进行强制刷新操作,可以调用this.$forceUpdate()
强制刷新当前组件。
v-if
通过v-if
,或者自定义函数来控制组件的显示/隐藏。但不满足当前需求,在点击其他页签时,所有页签都需要保持显示。
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show
不适合作为强制刷新组件的方式使用,因为v-show
只是控制dom的显示或隐藏。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件