vue强制刷新组件的方法(vue强制刷新当前页面)

Vue组件强制刷新方法文章目标：记录前端开发中遇到的问题。

vue组件强制刷新方法

创作者：杰.

个人主页：Jay的个人主页

展望：如果本文内容对您有帮助，请点赞。你们的支持是我继续写作的最大动力。谢谢。

需求

实现动态选项卡组件，根据选项卡类型获取对应的组件。例如，视图类型的选项卡仅用于数据展示，不进行任何增删改查；**多对多类型**的选项卡将实现对象之间的绑定。每个组件都有不同的业务逻辑，自然组件的封装方式也不同。

问题

某个对象可能有多个相同类型的选项卡，因此在相同类型的选项卡之间来回单击时，选项卡中的数据不会发生变化。

分析

当组件地址相同时，来回点击时有缓存，选项卡相关数据不会刷新。

源码简单介绍

activeComponent通过计算属性根据页面名称动态获取对应的组件地址。

activeTabData通过根据页面名称计算属性，动态获取当前tab对应的详细参数，如tab-object-id、tab-id等。

模板v-if='tabsList.lengthtabName'组件：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'/组件/模板

解决

通过更改变量来强制刷新组件。但需要注意的是，只要key的值发生变化，组件就会自动刷新，所以key的值可以是任何类型，只要是唯一的即可。

模板v-if='tabsList.lengthtabName'组件：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'/组件/模板

其他解决方法

this.$forceUpdate()

子组件的强制刷新方法。当需要强制刷新当前组件时，可以调用this.$forceUpdate()来强制刷新当前组件。

v-if

使用v-if或自定义函数来控制组件的显示/隐藏。但它不能满足当前的需求。单击其他选项卡时，所有选项卡都需要保持显示。

v-if是“真”条件渲染，因为它确保条件块内的事件侦听器和子组件在切换期间被适当地销毁和重新创建。v-show不适合用作强制刷新组件的方式，因为v-show只控制dom的显示或隐藏。