發(fā)生變化：
- 在自定義組件上使用時，
v-model的prop 和 event 默認(rèn)名稱會更改：- prop：
value->modelValue - event ：
input=>update:modelValue
- prop：
-
v-bind的.sync修飾符和組件model選項(xiàng)被刪除并替換為v-model -
v-model現(xiàn)在可以在同一個組件上進(jìn)行多個綁定 - 可以自定義
v-model修飾符
2.x語法
在input中使用
<input v-model='message'>
<!-- would be shorthand for: -->
<input :value='message' @input='message=$event.target.value'>
在組件中使用
<ChildComponent v-model="message" />
<!-- would be shorthand for: -->
<ChildComponent :value="message" @input="message = $event" />
如果我們想將 prop 或事件名稱更改為不同的名稱即寡，我們需要向組件添加一個model選項(xiàng)徊哑，如：
//ParentComponent.vue
<ChildComponent v-model="message" />
//ChildComponent.vue
export default {
model: {
prop: 'info',
event: 'change',
},
}
v-model在這種情況下，就相當(dāng)于：
<ChildComponent :info="message" @change="message = $event" />
v-bind.sync
某些情況下聪富，我們需要實(shí)現(xiàn)對組件屬性的雙向綁定莺丑。例如我們在上面這個ChildComponent中，通過某一事件的觸發(fā)（如點(diǎn)擊某一按鈕）從而向父組件傳達(dá)分配新值
this.$emit('update:info', newValue)
父組件偵聽該事件并更新本地?cái)?shù)據(jù)：
//ParentComponent.vue
<ChildComponent :info="message" @update:info="message = $event" />
簡寫為以下形式：
<ChildComponent :info.sync="message" />
3.x語法
在 3.x 版本中善涨，組件上使用 v-model相當(dāng)于傳遞了一個 modelValue 屬性以及觸發(fā)一個 update:modelValue 事件
<ChildComponent v-model="message" />
<!-- would be shorthand for: -->
<ChildComponent
:modelValue="message"
@update:modelValue="message = $event"
/>
如果要改變綁定的屬性名窒盐，我們可以將參數(shù)傳遞給v-model
<ChildComponent v-model:info="message" />
<!-- would be shorthand for: -->
<ChildComponent :info="message" @update:info="message = $event" />
如果我們想在子組件中用input綁定傳遞過來的數(shù)據(jù)，并做實(shí)時修改那該怎么操作呢钢拧？
首先我們不能直接綁定傳遞過來數(shù)據(jù)蟹漓，哪怕綁定了也無法做到實(shí)時修改，父組件傳遞了那就是傳遞了你如何都影響不到我當(dāng)前組件的實(shí)際數(shù)據(jù)源内。而且一般在項(xiàng)目中我們都不會直接對props數(shù)據(jù)進(jìn)行綁定修改葡粒。我們可以利用個中間值數(shù)據(jù)去操作，如：
<input v-model='dataDetail'>
export default {
computed: {
dataDetail: {
set(value) {
this.$emit('update:modelValue',value)
},
get() {
return this.modelValue
}
}
},
}
另外膜钓，它可以進(jìn)行多個綁定：
<ChildComponent v-model:info="message" v-model:content="cons" />
<!-- 相當(dāng)于 -->
<ChildComponent
:info="message"
@update:info="message = $event"
:content="cons"
@update:content="cons = $event"
/>
