vue2 v-model 的使用方式在這篇「[Vue.js] 如何在component自訂v-model」介紹,簡單說就是結合v-model其實綁定了名為 value 的 props 和 input 的 emit事件,因此所謂的 v-model 就是一個父子元件的雙向溝通,在 vue2 兩者是相同的:
<input v-model="username"> <input :value="username" @input="(value)=>(username=value)">
但是!
vue3 props 預設名稱從 value 改為 modelValue ,emit 名稱則從 input 改為 update:modelValue,如果用錯了就無法達成雙向的綁定。
<input v-model="username"> <input :model-value="username" @update:modelValue="(value)=>(username=value)">
在 vue2 中可以用自訂 model 來自訂 props 和 emit 名稱,在 Vue3 移除不再支援,如果不想使用 modelValue 的話,在 Vue3 可以這樣寫:
<MyComponent v-model:username="username" /> <MyComponent :username="username" @update:username="(value)=>(username=value)" />
元件本身應該增加這個 props,更新時會呼叫 update:username
// MyComponent.vue props: { username: { type: String, required: true, }, }
跟 vue2 .sync 有點相似,vue3不再支援 .sync ,寫法會是 v-model:[NAME] 後面 Name 就是想自訂的名稱,更新時update:[NAME],以事件名稱來看不算是完全客製,須按照規則觸發向上更新
但這個特性最棒的是支援多組 v-model ,你可以這樣寫:
<MyComponent v-model:username="username" v-model:password="password" />
總結將 vue2 升至 vue3,v-model 應該注意三個地方:
1. 不再使用 .sync
<MyComponent :username.sync="name" /> <!-- to be replaced with --> <MyComponent v-model:username="name" />
2. 將所有的 value 和 input 和 modelValue 和 update:modelValue
<MyComponent v-model="name" />
// MyComponent.vue export default { props: { modelValue: String, // "vaule" is replaced }, emits: ['update:modelValue'], methods: { changeName(name) { this.$emit('update:modelValue', name); // "input" is replaced }, }, };
3. 不再使用 model
直接用 v-model ,v-model:[Name]
參考文章:https://v3-migration.vuejs.org/breaking-changes/v-model.html