當(dāng)我們的表單有大量字段或者嵌套字段的時(shí)候
這樣一個(gè)一個(gè)定義字段會(huì)讓代碼變的很臃腫
useField
useField 是一個(gè)類(lèi)似于 useForm 的組合函數(shù)寂嘉,它使創(chuàng)建和管理輸入組件變得更容易奏瞬。我們創(chuàng)建自定義表單控件的時(shí)候基本都使用這個(gè)api
下面定義一個(gè)自定義的input我希望我的input的字段值是動(dòng)態(tài)的不是寫(xiě)死的
還可以封裝更多的表單控件交給表單使用,因?yàn)槲覀冊(cè)谧钔鈱诱{(diào)用過(guò)useForm函數(shù)所以他們都共享一個(gè)上下分只要是這個(gè)組件的后代組件那么都可以使用這些api但是useForm只能被調(diào)用一次泉孩,這樣定義字段的壓力就減輕了很多了
觸發(fā)事件
useField() 組成函數(shù)與任何事件無(wú)關(guān)硼端,它只在值 ref 發(fā)生變化時(shí)進(jìn)行驗(yàn)證。不過(guò)寓搬,它為您提供了設(shè)置自己的驗(yàn)證體驗(yàn)所需的一切显蝌。
const { handleChange, handleBlur } = useField('someField');?
handleChange :更新字段值,可配置為觸發(fā)驗(yàn)證或靜默更新值
handleBlur:更新 meta.touched 標(biāo)記,不會(huì)觸發(fā)驗(yàn)證曼尊。
handleChange 可以在任何地方調(diào)用酬诀,而不僅僅是在模板中,也不僅僅是一個(gè)事件處理程序骆撇。您可以隨時(shí)使用它來(lái)更改字段值瞒御,另外,您還可以選擇 handleChange 是否要觸發(fā)驗(yàn)證神郊。
handleBlur 函數(shù)也可以觸發(fā)驗(yàn)證只不過(guò)他不會(huì)更改字段的值只是把meta屬性中的touched改為true,默認(rèn)情況下不會(huì)驗(yàn)證當(dāng)前值肴裙,因此必須在第二個(gè)參數(shù)中傳遞 true 才能觸發(fā)驗(yàn)證。
想象一下這個(gè)交互當(dāng)用戶(hù)一開(kāi)始輸入的時(shí)候是失去焦點(diǎn)校驗(yàn)涌乳,當(dāng)發(fā)現(xiàn)校驗(yàn)不通過(guò)切換為實(shí)時(shí)校驗(yàn)蜻懦,通過(guò)了再變成失去焦點(diǎn)校驗(yàn)。
實(shí)現(xiàn)這個(gè)功能需要了解v-on指令知識(shí)
v-model支持
useField 函數(shù)可以自動(dòng)為您管理 v-model集成夕晓。通常宛乃,您需要在創(chuàng)建的每個(gè)組件中都這樣做:
現(xiàn)在可以由useField函數(shù)代勞, 只需要告訴他開(kāi)啟就可以
現(xiàn)在蒸辆,每當(dāng)值發(fā)生變化時(shí)征炼,您就會(huì)發(fā)出帶有新值的 update:modelValue 事件。當(dāng)你想在自定義輸入組件中使用 v-model 時(shí)躬贡,這將非常有用
您也可以為 modelValue 使用不同的屬性名稱(chēng)谆奥,例如,可以通過(guò)直接向 syncVModel 傳遞模型名稱(chēng)來(lái)實(shí)現(xiàn) v-model:text拂玻。