vue3中如何實現自定義組件的雙向綁定


可以使用v-model來實現,當然也可以不適用v-model。v-model其實是一種簡寫形式。
<Component v-model="faData" />
與下面一樣
<Component :modelValue="faData" @update:modelValue="faData = $event" />
v-model是下面寫法的一種簡寫。下面的更好理解,就是在組件中使用emit將新值發送到父組件並更新faData的值。
有時候可能會需要再model后面加上名稱就像下面這樣:

<Component v-model:msg="faData" />
<Component :msg="faData" @update:msg="faData = $event" />
在子組件中還是發出update:msg事件並將新值帶過來更新父組件中的faData。其中msg是自己自定義的,一般是update:參數名的形式。其實你如果不使用v-model來實現雙向綁定,事件的名稱也可以不帶update可以自定義。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM