vue 中的ref

vue 中的ref

vue 中的ref

1. ref​ ** 的基本作用**

在 Vue 中,ref 是用来获取 DOM 元素或者组件实例的一种方式。对于 <el-form> 组件,通过 ref 可以获取到该表单组件的实例,进而调用表单组件提供的各种方法和访问其属性。

2. 使用 ref ​ ** 获取 <el-form>​ ** 组件实例

jsx 复制代码
<template>
	<el-form :model="form" ref="myFormRef">
		<el-form-item label = "姓名">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
		<el-form-item label = "姓名">
			<el-button @click="submitForm">提交</el-button>
		</el-form-item>
	</el-form>
<template>
<script setup>
import {ref} from 'vue';

const myFormRef = ref(null);
const formDate = ref({
	name:''
});

const submitForm = ()	=>{
	myFormRef.value.validate((valid)=>{
		if (valid) {
      console.log('表单验证通过,提交表单');
    } else {
      console.log('表单验证失败');
      return false;
    }
	});
}
<script>
利用 ref 函数创建了一个响应式引用 myFormRef ,并将其绑定到 <el-form> 组件上。
在 submitForm 方法中,通过 myFormRef.value 获取表单组件的实例,然后调用 validate 方法进行表单验证。

**3. <el-form>​ ** 组件实例的常用方法

借助 ref 获取到 <el-form> 组件实例后,能够调用以下常用方法:

  • validate(callback) :对整个表单进行验证,验证结果会通过回调函数返回。
  • validateField(props, callback) :对部分表单字段进行验证,props 是需要验证的字段名数组,验证结果通过回调函数返回。
  • resetFields() :重置表单数据和校验状态。
  • clearValidate(props) :清除表单的验证信息,props 是可选的字段名数组。

4. 注意事项

  • 初始值为 null :在组合式 API 里,ref 初始值通常设为 null ,直到组件挂载完成后才会赋值为组件实例。
  • 生命周期问题 :要保证在组件挂载完成之后再去访问 ref 引用的组件实例,不然可能会得到 null 。例如在组合式 API 中,可以在 onMounted 钩子中使用 ref
相关推荐
xaboy2 天前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D2 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
马卡龙MK2 天前
vue 不完美的多标签页解决方案
vue
goms2 天前
前端项目集成lint-staged
前端·vue·lint-staged
梁辰兴3 天前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
ChongYu重玉3 天前
【node/vue】css制作可3D旋转倾斜的图片,朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
csj503 天前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
寻觅~流光4 天前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
好青崧4 天前
单页面和多页面的区别和优缺点
前端·vue
程序猿小D4 天前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动