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
相关推荐
weixin_4435669817 小时前
天学网面试 —— 中级前端开发岗位
vue
YGY Webgis糕手之路1 天前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
aiguangyuan1 天前
前端开发 Vue 组件优化
系统架构·vue·前端开发
YGY Webgis糕手之路1 天前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
pengzhuofan1 天前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web
伍哥的传说3 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan4 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘4 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug5 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201305 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox