Vue 组件强制刷新方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 组件强制刷新方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🏆 文章目标：记录前端开发中遇见的问题。
🍀 Vue 组件强制刷新方式
✅ 创作者：Jay…
🎉 个人主页：Jay的个人主页
🍁 展望：若本篇讲解内容帮助到您，请帮忙点个赞吧，您的支持是我继续写作的最大动力，谢谢。🙏

需求

为实现动态页签组件，根据页签的类型获取对应的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的显示或隐藏。文章来源地址https://www.toymoban.com/news/detail-421522.html

到了这里，关于Vue 组件强制刷新方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！