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