位置: IT常识 - 正文

Vue 组件强制刷新方式(vue组件强制刷新)

编辑:rootadmin
Vue 组件强制刷新方式

推荐整理分享Vue 组件强制刷新方式(vue组件强制刷新),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 强制刷新,vue强刷新,vue强制刷新数组,vue强刷新,vue强刷新,vue 强制刷新dom,vue强制刷新数组,vue组件强制刷新,内容如对您有帮助,希望把文章链接给更多的朋友!

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

需求

为实现动态页签组件,根据页签的类型获取对应的component。如视图类型的页签,只用于数据显示,不做任何增删查改;**多对多类型 **的页签,将实现对象与对象之间的绑定。每个component有不同的业务逻辑,自然组件封装的方式也不一样。

问题

可能某一个对象存在多个相同类型的页签,这样相同类型页签之间进行来回点击时,页签内的数据没有发生改变。

分析Vue 组件强制刷新方式(vue组件强制刷新)

组件地址相同时,来回点击存在缓存,页签相关的数据不会进行刷新。

源码简单介绍

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.jiuchutong.com/zhishi/297755.html 转载请保留说明!

上一篇:Python人脸识别

下一篇:【论文导读】 - 关于联邦图神经网络的3篇文章(论文 导论)

  • 刀塔霸业ios国区无法下载(刀塔霸业ios)(刀塔霸业安卓怎么玩)

    刀塔霸业ios国区无法下载(刀塔霸业ios)(刀塔霸业安卓怎么玩)

  • airpodsmax重新配对方法(airpods2重新配对需要按多少秒)

    airpodsmax重新配对方法(airpods2重新配对需要按多少秒)

  • ps5蓝牙耳机怎么连接(ps5蓝牙耳机怎么连接手机)

    ps5蓝牙耳机怎么连接(ps5蓝牙耳机怎么连接手机)

  • 携程订火车票怎么取消优享预定(携程订火车票怎么取票流程)

    携程订火车票怎么取消优享预定(携程订火车票怎么取票流程)

  • 微信聊天置顶怎么设置(微信聊天置顶怎么设置文字)

    微信聊天置顶怎么设置(微信聊天置顶怎么设置文字)

  • 微博观看历史在哪里(微博怎么看历史观看记录)

    微博观看历史在哪里(微博怎么看历史观看记录)

  • 不换套餐可以用5g网络吗(手机套餐不变换手机号可以吗)

    不换套餐可以用5g网络吗(手机套餐不变换手机号可以吗)

  • home键有声音怎么回事(home键声音怎么调出来)

    home键有声音怎么回事(home键声音怎么调出来)

  • iphone美版有锁什么意思(苹果美版有锁是什么)

    iphone美版有锁什么意思(苹果美版有锁是什么)

  • 华为lonal00什么型号(华为lonal00手机报价)

    华为lonal00什么型号(华为lonal00手机报价)

  • 手机没欠费为什么停机(手机没欠费为什么数据用不了)

    手机没欠费为什么停机(手机没欠费为什么数据用不了)

  • 小米6自带充电头多少w(小米6自带充电器多少瓦)

    小米6自带充电头多少w(小米6自带充电器多少瓦)

  • 怎样取消拼多多月卡自动续费(怎样取消拼多多免密码支付)

    怎样取消拼多多月卡自动续费(怎样取消拼多多免密码支付)

  • 三星智能管理器安全怎么关闭(三星智能管理器 美版)

    三星智能管理器安全怎么关闭(三星智能管理器 美版)

  • iphone11pro max是5G吗

    iphone11pro max是5G吗

  • vivo怎么调大内存(vivo怎么放大屏幕)

    vivo怎么调大内存(vivo怎么放大屏幕)

  • 影迷大院闪退(影迷大院怎么下载不了)

    影迷大院闪退(影迷大院怎么下载不了)

  • 怎样换输入法(怎样换输入法界面)

    怎样换输入法(怎样换输入法界面)

  • 微信交易限制通知原因(微信分付开通条件)

    微信交易限制通知原因(微信分付开通条件)

  • 关闭360安全卫士的方法(关闭360安全卫士在哪里关)

    关闭360安全卫士的方法(关闭360安全卫士在哪里关)

  • 创造营微视怎么投票(视频创造营2020)

    创造营微视怎么投票(视频创造营2020)

  • 今日头条如何认证(今日头条如何认证领域)

    今日头条如何认证(今日头条如何认证领域)

  • 手机怎么给照片加水印(手机怎么给照片排版)

    手机怎么给照片加水印(手机怎么给照片排版)

  • Win10玩游戏提示显卡驱动已停止响应怎么办? 重置显卡驱动的技巧(win10玩游戏提示内存不足无法处理此命令)

    Win10玩游戏提示显卡驱动已停止响应怎么办? 重置显卡驱动的技巧(win10玩游戏提示内存不足无法处理此命令)

  • 增值税开票软件ukey版
  • 注册资本印花税减半征收政策
  • 什么情况要缴印花税
  • 个税申报导入上月数据
  • 个税申报初始化密码
  • 在建工程是资产
  • 增加税收的方法有哪些
  • 一般纳税人需要申报什么税
  • 公司股份无偿转让怎么办理流程
  • 流动资产短期借款
  • 交通违章罚款可以在手机上交吗
  • 查增应纳税所得额怎么算
  • 境外企业国内签订合同如何缴纳印花税?
  • 营业范围之外的产品可以出售吗
  • 员工销售家具取得的工资怎么写分录?
  • 分配利润顺序
  • 花卉租赁发票税率是多少
  • 免抵退转免税账务处理
  • 企业自产自用需要交增值税吗
  • 招待费多少
  • 出票人账号是付款号吗
  • 广告制作费怎么入账
  • 非全日制劳动用工扣税
  • 关于购买专业书籍的请示
  • 行政单位上年支出退回
  • 期末未抵扣数
  • 房地产预缴所得税的计税基础
  • 如何用注册表
  • 结转材料采购成本的会计分录是什么
  • 企业清算有哪些类型
  • 失控发票的企业怎么处理
  • php options
  • php操作mysql数据库的扩展有哪三个
  • set0
  • 败诉方承担诉讼费缴直接付给法院还是胜诉方
  • vue实现简易购物车
  • 图像深度算法
  • 日期按钮
  • laravel 分页 api
  • 财政拨款结转的二级科目有哪些
  • 小微企业所得额如何计算
  • 网红产品的推广文案
  • 善意取得虚开发票罪认定
  • 哪些发票是成品发票
  • 可供出售金融资产的会计处理
  • 纳税申报资料报表怎么填
  • 固定资产转移说明模板
  • 业务招待费汇算清缴账务处理
  • 房租收入如何缴纳增值税
  • 商品进销差价会计科目流程图模板
  • 小规模纳税人什么时候用3%什么时候用5%
  • 本月没有认证的发票怎么做账
  • 金税盘年服务费账务处理
  • 从增值税抵扣进项怎么算
  • 增值税抵扣可以完全抵扣吗
  • 包工包料成本比例
  • sqlserver获取uuid
  • win10 tab alt
  • gho文件硬盘安装
  • 注册表及其作用
  • Red Hat Enterprise Linux 4+Nginx 0.7.47+PHP5.2+MYSQL5.0+Memcache+eAccelerator收
  • slserves.exe - slserves是什么进程
  • 如何让windows7更快
  • linux或者命令
  • 在linux操作系统中,/etc/rc.d/init.d
  • win7系统里面怎么找到微信程序
  • win7桌面图标有小方块
  • opengl入门教程(精)
  • javascript中
  • 批处理统计文件夹内文件大小
  • 批处理修改文件修改日期
  • 前端笛卡尔积
  • shell脚本自动化
  • linux ssh 安装
  • python django
  • python中如何抛出异常
  • 成都市电子税务局网上申报
  • 可转债中签当天扣款吗
  • 个体户 零申报
  • 中国古代的税收制度的演变
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设