vue3 销毁组件方法

news2024/11/17 8:18:13

问题描述:使用elementplus的dialog,当关闭弹窗后不刷新页面,直接再次打开发现弹窗中还存留上一次的数据。尝试定义关闭事件,或者使用api中提供的属性destroy-on-close 都不行。后来发现这是一个误区。弹窗关闭时并不代表这个组件已经被销毁了,只是dialog关闭了
解决方法:使用v-if 控制页面的创建与销毁。
由于我这里dailog中的数据比较多,所以我抽成了一个组件,在父组件中引用了,但是关闭弹窗的操作是在子组件的dialog中,所以这里又涉及到了子父组件的传值。再来复习一遍~。
ps:我这里的业务场景是通过在父页面点击按钮来控制子页面是否弹出来,所以具体实现是这样的:
在父页面中定义一个变量,默认为false,当点击弹出按钮时,将这个变量置为true;子页面中手动触发关闭dialog的事件中,将该变量设置为false,并将值传递待到这个父页面。
结构:
子组件
在这里插入图片描述

父组件:
在这里插入图片描述

接下来具体实现:
子组件:当子组件的dialog手动关闭时
在这里插入图片描述
关闭方法:
使用defineEmits,定义一个方法,并用一个变量去接收,在关闭事件中传递一个值,为false

const colse = defineEmits(["ok"])
function closeNDialog() {
  colse("ok", false)
}

父页面:在父页面引用的子组件中使用v-if绑定是否销毁标识,并定义方法去接收子组件传递过来的布尔值。在父页面通过点击button打开子组件的事件中将该值设置为true,此时子页面为以创建


 <!-- 子组件,使用v-if接收,定义ok方法接收子传递过来的布尔值,
       需要注意。ok应和子页面中定义的保持一致,这个e就代表的是子页面colse方法传递过来的值,
       该值为false,然后我们将false赋值给是否销毁标识
 -->
    <aaa v-if=isExist @ok="e=>isExist=e"></aaa>
	//定义是否销毁标识,默认为false,代表销毁
	const isExist = ref(false);

父页面通过点击button打开子组件的事件

const showManage = (row) => {
  openDialog({}).then(resp => {
    isExist.value = true
    // 具体业务逻辑.....
  })
}

至此就完成了通过v-if 和子父组件传值的方法来销毁子页面的需求,实现了打开子页面请求数据后,再不刷新地址栏的情况下,再次打开子页面弹窗时,上一次请求的数据被清空,相当于重新创建了一个子页面。但是并不建议这样做,因为重复创建dom元素。我这里由于子页面中数据有很多,并且子页面中还嵌套了子页面,要想实现清空数据,目前我想到的解决方法就是创建,销毁子页面。欢迎其他大佬指正更好的实现方式。
以上描述为个人见解,描述有误的地方欢迎大家指正,有问题可加v:876942434,一起进步~。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/149819.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux测试主机之间连通性和端口是否开放的方法

文章目录测试主机之间的连通性测试端口是否开放(curl)测试端口是否开放(wget)测试端口是否开放(ssh)下面每一种测试方式都给出了成功通信的截图&#xff0c;如果与截图不相符可以根据你控制台的报错调试。测试主机之间的连通性 测试两个主机之间是否可以通信&#xff0c;通常使…

Odoo 16 企业版手册 - 库存管理之规则与路线

规则和路线 产品上定义的路线将帮助您理解和跟踪产品的每一次调拨。它是用于库存调拨的操作规则或路线。没有适当的策略&#xff0c;就很难监控和管理公司的库存变动。根据您的公司政策&#xff0c;您可以设置某些操作规则来定义库存中的产品调拨。使用这些规则&#xff0c;Odo…

何为 Vue3 组件标注 TS 类型,看这篇文章就够了!

文章目录前言一、为 props 标注类型使用 < script setup >非 < script setup >二、为 emits 标注类型使用 < script setup >非 < script setup >三、为 ref() 标注类型默认推导类型通过接口指定类型通过泛型指定类型四、为 reactive() 标注类型默认推导…

什么真无线蓝牙耳机值得入手?蓝牙耳机全方位挑选攻略

从我们的日常生活中可以看到&#xff0c;蓝牙耳机的使用频率真的是越来越高了&#xff0c;这主要得益于蓝牙耳机的使用便捷性以及近几年的快速发展。很多人在选择时不禁有些疑问&#xff0c;不知道哪款真无线蓝牙耳机值得入手&#xff1f; 都说买新不买旧&#xff0c;所以&…

黑马2022新版SSM框架教程(SpringMVC_day01)

SpringMVC_day01 文章目录SpringMVC_day011&#xff0c;SpringMVC简介1.1 SpringMVC概述2&#xff0c;SpringMVC入门案例2.1 需求分析2.2 案例制作步骤1:创建Maven项目&#xff0c;并导入对应的jar包步骤2:创建控制器类步骤3:创建配置类步骤4:创建Tomcat的Servlet容器配置类步骤…

网上流行短视频运营方法验证和试错,这些坑你踩过吗?

网上流行短视频运营方法验证和试错,这些坑你踩过吗&#xff1f; 人到中年&#xff0c;35岁以后找份工作不容易&#xff0c;这不刚刚有了一份短视频运营的工作。 在网上找了一些短视频运营技巧&#xff0c;看网上的评论有说有用的有说没用的。 只好自己去试一下错了&#xff…

升级win11后,此电脑中原来7个文件夹的恢复

目录前言问题描述解决方法新建一个.reg文件在.reg文件中添加代码执行.reg文件效果展示P.S. 添加部分文件夹参考文献链接前言 这个方法需要向注册表添加一些项。只需要新建一个.reg文件然后执行即可。 问题描述 更新win11后&#xff0c;以前的文件夹都消失不见了 解决方法 …

一文读懂JVM类加载机制过程及原理万字详解

JVM加载机制详解 文章目录JVM加载机制详解类装载子系统类加载子系统介绍类加载器ClassLoader角色类加载的执行过程加载链接初始化< cinit > 方法和 < init > 方法有什么区别&#xff1f;类加载器类加载器的作用类加载器分类启动类加载器扩展类加载器系统类加载器用…

STM32 TIM PWM高阶操作:刹车及状态约束

STM32 TIM PWM高阶操作&#xff1a;刹车及状态约束 刹车及状态约束是STM32 TIM PWM控制里面比较复杂的一部分&#xff0c;涉及到PWM波形产生前&#xff0c;中&#xff0c;后的管脚状态输出。 这里先引入两个描述&#xff0c;一个是“半高阻”&#xff0c;意思是STM32管脚输出…

我的基于 JamStack 的新博客

概述 今天心血来潮&#xff0c;介绍一下我的新博客站点 —— https://EWhisper.cn。 我是做基础平台 PaaS 运维和架构的&#xff0c;挺喜欢把工作中学到的新知识写下来、记笔记&#xff0c;突然有一天就抱着「资源共享、天下为公」的理念&#xff0c;分享我的学习心得&#x…

KDevelop详细Debug教程

KDevelop官方连接&#xff1a;https://www.kdevelop.org/ 感觉网上对KDevelop的使用介绍比较少&#xff0c;也没有一个完整的Debug教程&#xff0c;这里记录一下我的踩坑过程。当然首先你需要有一个Ubuntu系统&#xff0c;然后需要apt-get安装一下KDevelop。 首先CMakeLists.t…

基于springboot+mybatis+mysql+html实现宠物医院管理系统2(包含实训报告)

基于springbootmybatismysqlhtml实现宠物医院管理系统2&#xff08;包含实训报告&#xff09;一、需求背景二、系统简介二、系统主要功能界面1、用户登陆2、系统主页3、医生信息4、客户信息5、宠物信息6、浏览管理7、诊断管理8、医生管理9、用户管理三、其它系统四、获取源码一…

Dubbo相关概念

分布式系统中的相关概念 dubbo 概述 dubbo快速入门 dubbo的高级特性 2-相关概念 2.1-互联网项目架构-特点 互联网项目架构-特点 用户多 流量大&#xff0c;并发高 海量数据 易受攻击 功能繁琐 变更快 传统项目和互联网项目的不同 用户体验&#xff1a; 美观、功能…

【 Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus 第四篇】(持续更新中)

在第三篇中&#xff0c;我们主要学习了组件的封装与使用以及 组件间传值和 Element Plus 表格、表单的用法 本期需要掌握的知识如下: mixin 公共方法封装和使用项目中导入 VueRouter使用 VueRouter 完成 路由跳转、获取路由信息VueRouter 模块化、路由拦截器权限路由配置 下期…

https 加密原理握手过程详解

HTTPS握手过程 HTTPS的握手过程比较繁琐&#xff0c;我们来回顾下。 先是建立TCP连接&#xff0c;毕竟HTTP是基于TCP的应用层协议。 在TCP成功建立完协议后&#xff0c;就可以开始进入HTTPS阶段。 HTTPS可以用TLS或者SSL啥的进行加密&#xff0c;下面我们以TLS1.2为例。 总…

自定义antd或element table 列设置组件(拖拽排序及控制是否展示)

需求 展示出所有的字段显示当前展示的是哪些字段可以全选、取消全选可以拖拽排序&#xff0c;更改字段的展示顺序&#xff0c;在前面还是在后面可以保存配置&#xff0c;刷新不失效 难点 如何进行拖拽排序&#xff0c;自己手写一个吗&#xff1f;如何得到拖拽后的顺序&#…

verilog学习笔记- 8)状态机

目录 概念&#xff1a; 状态机的模型&#xff1a; 状态机的设计&#xff1a; 根据状态机的实际写法&#xff0c;状态机可以分为一段式、二段式和三段式状态机。 三段式状态机的基本格式&#xff1a; 概念&#xff1a; 状态机&#xff0c;全称是有限状态机&#xff08;Fin…

再学C语言29:函数——概述

C的设计原则是把函数作为程序的构成模块 函数&#xff08;function&#xff09;&#xff1a;用于完成特定任务的程序代码的自包含单元 使用函数的好处&#xff1a; 1&#xff09;函数的使用可以省去重复代码的编写&#xff0c;尤其是程序中需要多次使用某种特定的功能时&…

unity日记4(鼠标键盘交互、实例)

目录 鼠标事件 鼠标点击、抬起、长按事件 键盘事件 键盘点击、抬起、长按事件 键盘键位替换 实例&#xff1a;鼠标-音乐播放/暂停 实例&#xff1a;调用其他对象的组件&#xff08;双方法&#xff09; 实例&#xff1a;调整其他对象的公有参数 鼠标事件 鼠标点击、抬起、长…

实体关系抽取

关系抽取分为pipeline型和联合&#xff08;Joint&#xff09;抽取。 pipeline形式&#xff1a; 指把关系抽取&#xff0c;拆分成多个任务&#xff0c;如【先抽Subject&#xff0c;再一起抽Predict和Object】&#xff08;CasRel&#xff09;、【先判断Predict&#xff0c;再一…