当前位置: 首页 > news >正文

在Vue中如何对组件进行销毁在进行挂载

今天有个需求,每次进入这个组件的时候都会运行mounted方法,比如有个组件A,组件A里有一个按钮,每点击这个按钮,组件B就会运行这个mouted方法,这时候我们想到的就是让这个组件先变为null 在重新给他赋值


<template><div><h1>{{ msg }}</h1><button @click="changeComp">切换组件</button><component :is="comp" /></div></template><script>
import TheWelcome from './components/TheWelcome.vue'export default {name: 'App',components: {thewelcome:TheWelcome},data() {return {msg: 'Hello World',comp: ''}},mounted() {},methods: {changeComp() {this.comp = null;this.comp = 'thewelcome'}}
}
</script>

但是呢 当点击按钮只会运行一次mounted 

原因:这是因为vue为了更新优化,当vue检测到comp变为null,准备销毁当前组件,但是没有真正的执行DOM更新,由于Vue的异步更新机制,comp的值被快速的覆盖为thewelcome,不会真正的销毁组件,TheWelcome组件只是重新渲染,不会触发unmounted和mounted

解决方案:

使用this.$nextTick来进行触发,这个方式确保代码在DOM更新后执行

changeComp() {this.comp = null;  // 移除当前组件this.$nextTick(() => {this.comp = 'thewelcome'; // 在下一个 DOM 更新周期重新挂载});
}

http://www.dtcms.com/a/272678.html

相关文章:

  • 模型训练之数据标注-Labelme的使用教程
  • 5款工具高效制作插图,PPT设计新选择!
  • 货车车架和悬架设计cad【7张】+设计说明书
  • leetcode 3440. 重新安排会议得到最多空余时间 II 中等
  • 《PyQt6-3D:开启Python 3D编程新世界 2》
  • 【TCP/IP】8. 传输层协议
  • hive小文件问题
  • 二层环路避免-STP技术
  • Linux【大数据运维】下制作Redis绿色免安装包(一)
  • 企业网络安全的“金字塔”策略:构建全方位防护体系的核心思路
  • upload-labs靶场通关详解:第20关 /.绕过
  • 以下哪种类型在Golang中不是内置类型?
  • zookeeper etcd区别
  • Keepalived+LVS实现LNMP网站的高可用部署
  • 登录为图片验证时,selenium通过token直接进入页面操作
  • Java 导出word 实现饼状图导出--可编辑数据
  • CIEDE2000 色差公式C++及MATLAB实现
  • 【零基础学AI】第35讲:策略梯度方法 - 连续控制任务实战
  • Swift 图论实战:DFS 算法解锁 LeetCode 323 连通分量个数
  • 快速搭建服务器,fetch请求从服务器获取数据
  • ReentrantLock 与 Synchronized 的区别
  • 给MySQL做定时备份,一天3次
  • method_name字段是什么
  • 单片机基础(STM32-DAY2(GPIO))
  • Linux驱动06 --- UDP
  • 飞书AI技术体系
  • web 系统对接飞书三方登录完整步骤实战使用示例
  • 低温冷启动 高温热启动
  • OpenCV 图像进阶处理:特征提取与车牌识别深度解析
  • 醋酸镨:闪亮的稀土宝藏,掀开科技应用新篇章