vue3补充

form表单重置

const { proxy } = getCurrentInstance()!;  // 获取挂载在全局的上下文proxy.resetForm('ruleFormRef');  // 在el-form中清空ref为ruleFormRef的表单

注:不推荐使用

不推荐的原因

  1. 类型安全问题:
    • 当在 TypeScript 环境中使用时,getCurrentInstance() 返回的类型是 ComponentInternalInstance | null,这意味着它可能返回 null。直接解构赋值 const { proxy } = getCurrentInstance() 可能会导致类型错误,因为 TypeScript 无法确保 proxy 属性一定存在。
    • 即便通过类型断言如 const { proxy } = getCurrentInstance() as ComponentInternalInstance 强制类型转换,这也只是绕过了编译时的类型检查,并未解决根本的类型不确定性问题。
  2. 依赖内部实现:
    • getCurrentInstance() 是 Vue 的内部 API,它主要用于库的开发者或者高级使用场景,而不是给普通应用开发者使用的。Vue 官方文档明确指出,它不应该在应用的业务代码中频繁使用,因为这可能会导致与未来版本的 Vue 不兼容。
  3. 可维护性和可读性:
    • 使用 getCurrentInstance() 可能会使代码的逻辑变得复杂和难以理解,特别是对于不熟悉 Vue 内部机制的人来说。它还可能引入额外的错误和调试难度。

替代方案

<template>  <el-form ref="formRef" :model="formData" label-width="100px">  <el-form-item label="Name">  <el-input v-model="formData.name"></el-input>  </el-form-item>  <el-form-item label="Email">  <el-input v-model="formData.email" type="email"></el-input>  </el-form-item>  <el-button type="primary" @click="submitForm">Submit</el-button>  <el-button @click="clearForm">Clear</el-button>  </el-form>  
</template>  <script setup>  
import { ref } from 'vue';  const formData = ref({  name: '',  email: ''  
});  const formRef = ref(null);  function submitForm() {  // 表单提交逻辑  console.log(formData.value);  
}  function clearForm() {  formRef.value.resetFields(); // 调用 Element UI 的 resetFields 方法来清空表单  
}  
</script>

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

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

相关文章

算法leecode笔记

具体代码&#xff1a; class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> hashtable;for (int i 0; i < nums.size(); i) {auto it hashtable.find(target - nums[i]);if (it ! hashtable.end…

Rust编写Windows服务

文章目录 Rust编写Windows服务一&#xff1a;Windows服务程序大致原理二&#xff1a;Rust中编写windows服务三&#xff1a;具体实例 Rust编写Windows服务 编写Windows服务可选语言很多, 其中C#最简单。本着练手Rust语言&#xff0c;尝试用Rust编写一个服务。 一&#xff1a;Win…

Git之如何删除Untracked文件(六十八)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…

【编程基础知识】mysql根据某个int字段计算到每一行为止的累加值怎么实现

一、方式一&#xff1a;窗口函数 在MySQL中&#xff0c;可以使用窗口函数&#xff08;Window Functions&#xff09;来计算每一行的累加值。如果你使用的是MySQL 8.0或更高版本&#xff0c;可以使用 SUM() 窗口函数结合 OVER() 子句来实现这个需求。 假设你有一个名为 sales 的…

Oracle数据库中的动态SQL(Dynamic SQL)

Oracle数据库中的动态SQL是一种在运行时构建和执行SQL语句的技术。与传统的静态SQL&#xff08;在编写程序时SQL语句就已经确定&#xff09;不同&#xff0c;动态SQL允许开发者在程序执行过程中根据不同的条件或用户输入来构建SQL语句。这使得动态SQL在处理复杂查询、存储过程中…

【计算机网络】UDP 协议详解及其网络编程应用

文章目录 一、引言二、UDP1、UDP的协议格式2、UDP 报文的解包和分用3、UDP面向数据报的特点 三、UDP输入输出四、UDP网络编程 一、引言 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种网络通信协议&#xff0c;它属于传输层的协议。是一…

PostgreSQL - tutorial

本文翻译整理自&#xff1a;官方文档 Preface 和 第一部分&#xff08;I. Tutorial&#xff09; 有需要的可以前往官方文档查看&#xff1a;https://www.postgresql.org/docs/15/index.html 文章目录 序言1.什么是PostgreSQL&#xff1f;2. PostgreSQL简史2.1 伯克利POSTGRES项…

【linux】ln 命令

ln 命令在 Linux 系统中用于创建链接&#xff08;links&#xff09;&#xff0c;它允许你创建一个文件的引用&#xff0c;指向该文件系统中的另一个位置。这种链接可以是硬链接&#xff08;hard link&#xff09;或软链接&#xff08;软连接&#xff0c;也称为符号链接&#xf…

HTTP中的Cookie与Session

一、背景 HTTP协议是无状态无连接的。 无状态&#xff1a;服务器不会保存客户端历史请求记录&#xff0c;每一次请求都是全新的。 无连接&#xff1a;服务器应答后关闭连接&#xff0c;每次请求都是独立的。 无状态就导致服务器不认识每一个请求的客户端是否登陆过。 这时…

【贪心算法】贪心算法

贪心算法简介 1.什么是贪心算法2.贪心算法的特点3.学习贪心的方向 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 1.什么是贪心算法 与其说是…

Spring为什么要用三级缓存解决循环依赖?

Spring为什么要用三级缓存解决循环依赖&#xff1f; 1. Spring是如何创建一个bean对象2. Spring三级缓存2.1 一级缓存&#xff1a;单例池&#xff0c;经历过完整bean生命&#xff0c;单例Bean对象2.2 二级缓存&#xff1a;提前暴露的Bean2.3 三级缓存&#xff1a;打破循环 3. S…

计算机网络通关学习(一)

简介 之前我通过王道的考研课进行了计算机网络的学习&#xff0c;但是在秋招准备过程中发现之前的笔记很多不足&#xff0c;学习的知识不够深入和巩固&#xff0c;所以再重新对《图解HTTP》&《图解TCP/IP》进行深度学习后&#xff0c;总结出了此篇博客&#xff0c;由于内容…

【C#】添加临时环境变量

在C#中&#xff0c;可以通过System.Environment类来添加临时环境变量。临时环境变量只在当前进程中有效&#xff0c;进程结束后变量即失效&#xff0c;不会写入系统的Path中。 using System;class Program {static void Main(){// 设置临时环境变量Environment.SetEnvironment…

08_Python数据类型_字典

Python的基础数据类型 数值类型&#xff1a;整数、浮点数、复数、布尔字符串容器类型&#xff1a;列表、元祖、字典、集合 字典 字典&#xff08;Dictionary&#xff09;是一种可变容器模型&#xff0c;它可以存储任意类型对象&#xff0c;其中每个对象都存储为一个键值对。…

openmv与stm32通信

OpenMV与STM32之间的通信是嵌入式系统中常见且重要的一环&#xff0c;尤其在机器视觉和自动控制领域。两者结合可以实现图像识别、数据处理以及基于识别结果的硬件控制&#xff0c;从而广泛应用于智能小车、机器人、无人机等领域。以下将详细阐述OpenMV与STM32之间的通信过程&a…

存储数据的树形结构

目录 1、二叉查找树 2、平衡二叉树AVL Tree 3 、平衡多叉树B-Tree 4、BTree树 5 、红黑树 红黑树的应用 6.平衡树的旋转 mysql 索引数据结构&#xff1a; Btree 索引是B树在数据库中的一种实现&#xff0c;最为常见的。B树 中的B代表平衡&#xff0c;而不是二叉 1、二…

带你如何使用CICD持续集成与持续交付

目录 一、CICD是什么 1.1 持续集成&#xff08;Continuous Integration&#xff09; 1.2 持续部署&#xff08;Continuous Deployment&#xff09; 1.3 持续交付&#xff08;Continuous Delivery&#xff09; 二、git工具使用 2.1 git简介 2.2 git的工作流程 2.3 部署g…

如何用 Scrapy 爬取网站数据并在 Easysearch 中进行存储检索分析

做过数据分析和爬虫程序的小伙伴想必对 Scrapy 这个爬虫框架已经很熟悉了。今天给大家介绍下&#xff0c;如何基于 Scrapy 快速编写一个爬虫程序并利用 Easysearch 储存、检索、分析爬取的数据。我们以极限科技的官网 Blog 为数据源&#xff0c;做下实操演示。 安装 scrapy 使…

3. Python计算水仙花数

Python计算水仙花数 一、什么是水仙花数&#xff1f; 百度答案 二、怎样使用Python计算水仙花数&#xff1f; 这里需要for循环&#xff0c;if判断&#xff0c;需要range()函数&#xff0c;需要知道怎么求个位数&#xff0c;十位数&#xff0c;百位数… 1. For循环 语句结…

CTFHub技能树-SQL注入-整数型注入

一、手动注入 思路&#xff1a;注入点->库->表->列->数据 首先使用order by探测有几列 http://challenge-215beae2f0b99b12.sandbox.ctfhub.com:10800/?id1 order by 2 我们发现order by 2 的时候有回显&#xff0c;到了order by 3 的时候就没有回显了&#xf…