vue2.x 語法
在 2.x 中即寒，在組件上使用 v-model 相當(dāng)于綁定 value prop 并觸發(fā) input 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的簡寫: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
子組件內(nèi)props里面value接收傳進(jìn)來的值吻商，然后使用this.$emit('input', '***')來改變外部對象的值
vue3.x 語法
在 Vue 3 中，雙向數(shù)據(jù)綁定的 API 已經(jīng)標(biāo)準(zhǔn)化，以減少開發(fā)者在使用 v-model 指令時的混淆，并且更加靈活胁澳。
Vue 3 中自定義組件上的 v-model 相當(dāng)于傳遞了 modelValue prop 并接收拋出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的簡寫: -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>
子組件內(nèi)props里面modelValue接收傳進(jìn)來的值，然后使用this.$emit('update:modelValue', '***')來改變外部對象的值
子組件部分實(shí)現(xiàn)：
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value：String`
},
methods: {
changeModelValue(value) {
this.$emit('update:modelValue', value) // 以前是 `this.$emit('input', title)`
}
}
}
此外：
若需要更改 model 的名稱米者，現(xiàn)在我們可以為 v-model 傳遞一個參數(shù)韭畸，以作為組件內(nèi) model 選項(xiàng)的替代：
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的簡寫: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
這樣我們可以很方便的定義多個雙休綁定，并且在高階封裝的時候能更好的使用$attrs來向下傳遞各種不同的v-model蔓搞。
