位置: 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篇文章(论文 导论)

  • word怎么删除横线(word怎么删除横线页眉)

    word怎么删除横线(word怎么删除横线页眉)

  • 三星9609相当于骁龙几(三星9600和9608的区别)

    三星9609相当于骁龙几(三星9600和9608的区别)

  • 段表始址和段表长度存放在(段表的概念)

    段表始址和段表长度存放在(段表的概念)

  • 屏幕裂了一条缝有必要换屏吗(屏幕裂了一条缝贴膜有气泡)

    屏幕裂了一条缝有必要换屏吗(屏幕裂了一条缝贴膜有气泡)

  • qq声纹气泡在哪里(qq声纹气泡大全2021)

    qq声纹气泡在哪里(qq声纹气泡大全2021)

  • 苹果8来电没有声音怎么办(苹果8来电没有声音是怎么回事)

    苹果8来电没有声音怎么办(苹果8来电没有声音是怎么回事)

  • 滴滴不接单也录音吗(滴滴不接单也录入行程吗)

    滴滴不接单也录音吗(滴滴不接单也录入行程吗)

  • 钉钉视频会议主持人录制是什么意思(钉钉视频会议主持人可以强制开麦吗)

    钉钉视频会议主持人录制是什么意思(钉钉视频会议主持人可以强制开麦吗)

  • 华为镜子是不是自带美颜(华为镜子是怎么回事)

    华为镜子是不是自带美颜(华为镜子是怎么回事)

  • 微信警告教育是什么(微信警告教育是封号吗)

    微信警告教育是什么(微信警告教育是封号吗)

  • 手机专业拍照使用方法(手机相机专业拍照)

    手机专业拍照使用方法(手机相机专业拍照)

  • ART一AL00x什么型号

    ART一AL00x什么型号

  • 韩剧tv怎么没有电影选项(韩剧tv怎么没有弹幕)

    韩剧tv怎么没有电影选项(韩剧tv怎么没有弹幕)

  • 快手粉丝从黑名单移出后为什么就没有了(快手粉丝黑名单怎么解除)

    快手粉丝从黑名单移出后为什么就没有了(快手粉丝黑名单怎么解除)

  • 苹果6shome键失灵怎么办(苹果6shome键失灵怎么截屏)

    苹果6shome键失灵怎么办(苹果6shome键失灵怎么截屏)

  • 磁盘未分配怎么办(磁盘未分配怎么合并到c盘)

    磁盘未分配怎么办(磁盘未分配怎么合并到c盘)

  • ps怎么选中字体修改(ps怎么选中字体边缘)

    ps怎么选中字体修改(ps怎么选中字体边缘)

  • 魅族16s怎么设置锁屏密码(魅族16s怎么设置屏幕常亮)

    魅族16s怎么设置锁屏密码(魅族16s怎么设置屏幕常亮)

  • 小米手机镜像功能在哪(小米手机镜像功能怎么找不到了)

    小米手机镜像功能在哪(小米手机镜像功能怎么找不到了)

  • 本地连接禁用了怎么恢复(本地连接禁用了,怎么也启动不了,怎么办?)

    本地连接禁用了怎么恢复(本地连接禁用了,怎么也启动不了,怎么办?)

  • 荣耀20屏幕哪家的(荣耀屏幕哪家的)

    荣耀20屏幕哪家的(荣耀屏幕哪家的)

  • 快手私密别人能看到吗(快手私密账户别人能发私信吗)

    快手私密别人能看到吗(快手私密账户别人能发私信吗)

  • 荣耀20i怎么返回主页(荣耀20i返回键怎么设置)

    荣耀20i怎么返回主页(荣耀20i返回键怎么设置)

  • 荣耀20支持什么解锁(荣耀20支持什么蓝牙协议)

    荣耀20支持什么解锁(荣耀20支持什么蓝牙协议)

  • win10蓝屏无法进入桌面(Win10蓝屏无法进入系统怎么办)

    win10蓝屏无法进入桌面(Win10蓝屏无法进入系统怎么办)

  • 如何申报个人所得税减免项目
  • 什么叫风险纳税人员
  • 劳务工报价单
  • 企业所得税季度预缴怎么计算
  • 小规模企业跨月专票如何冲红
  • 餐饮业成本的正确表述是
  • 电子设备按5年折旧可以吗
  • 暂估跨年取得发票怎么办
  • 短期筹资方式有没有股票
  • 车船税完税凭证号
  • 员工劳动保险赔多少钱
  • 暂估进项税额
  • 股权转让个人交的印花税可以入账吗
  • 法律关系三要素表
  • 小规模纳税人转成一般纳税人条件
  • 企业所得税期末贷方余额怎么办
  • 不得扣除任何费用的是
  • 集团企业内各个部门职责
  • 企业净资产指的是什么?
  • 法人往公户转账需要备注吗
  • 哪些票据可以冲抵增值税
  • 消费税应纳税额计算方法是什么有何特点
  • 房地产税是否存在退税
  • 华为matex3价格表
  • 当月支付的费用需要计提吗
  • 注册表修改系统安装日期
  • 王者荣耀百里守约是男是女
  • 应付账款和应收票据区别
  • 打开进程失败
  • os x yosemite dp5下载地址 os x 10.10 dp5更新内容
  • kindle屏幕黑斑
  • 广告费发票内容是什么
  • 返还土地出让金如何追缴的
  • 内部退养如何缴纳个人所得税
  • 房屋赠与双方办理流程
  • 车辆购置税发票在哪里打印
  • 定期定额和核定征收哪个好
  • node.js教程详细
  • 怎样部署
  • js怎么制作
  • [九]深度学习Pytorch-transforms图像增强(剪裁、翻转、旋转)
  • 职工教育经费扣除限额怎么算
  • mongodb配置文件详解
  • 收到的普票金额多开了怎么处理呢
  • 水利建设基金申报
  • 股份支付属于应付职工薪酬吗?
  • sql2005数据库
  • 应交税费应交增值税销项税额
  • 开的票比实际支付的多,账务怎么处理
  • 收到政府补贴如何入账
  • 离职补偿金的计算基数
  • 加盟费收入如何入账
  • 事业单位没有
  • 自建的固定资产折旧计入哪里
  • 进销存的会计处理实务
  • 提取备用金现金流量如何填写
  • 即期外汇交易有风险吗
  • 代发工资的手续流程
  • 进口关税如何交
  • 产品的销售费用计入
  • 小规模普票收入要交税吗
  • 批量sql语句
  • win2003安装加载阵列卡驱动
  • window配置在哪
  • linux arp -n
  • win1020h2正式版
  • python函数详解
  • perl 批量注释
  • expand.grid函数
  • python获取命令行执行命令的输出
  • cocos2dx schedule
  • python外星人入侵游戏
  • 用python写网页
  • 批处理循环执行批处理
  • Tcp/ip协议族
  • won10安装
  • 税控盘登录密码忘了怎么办怎么重置
  • 企业所得税年度申报表A类
  • 车辆购置税申报车辆登记地怎么填
  • 公司税务怎么查询缴款信息呢
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设