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。