vue 中的ref

vue 中的ref

vue 中的ref

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

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

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

<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 。