發生變化：

• 在自定義組件上使用時，v-model的prop 和 event 默認名稱會更改：
  • prop：value->modelValue
  • event ：input=> update:modelValue
• v-bind的.sync修飾符和組件model選項被刪除并替換為v-model
• v-model現在可以在同一個組件上進行多個綁定
• 可以自定義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選項，如：

//ParentComponent.vue

<ChildComponent v-model="message" />

//ChildComponent.vue

export default {
    model: {
        prop: 'info',
        event: 'change',
    },
}

v-model在這種情況下，就相當于：

<ChildComponent :info="message" @change="message = $event" />

v-bind.sync

某些情況下，我們需要實現對組件屬性的雙向綁定。例如我們在上面這個ChildComponent中，通過某一事件的觸發（如點擊某一按鈕）從而向父組件傳達分配新值

this.$emit('update:info', newValue)

父組件偵聽該事件并更新本地數據：

//ParentComponent.vue
<ChildComponent :info="message" @update:info="message = $event" />

簡寫為以下形式：

<ChildComponent :info.sync="message" />

3.x語法

在 3.x 版本中，組件上使用 v-model相當于傳遞了一個 modelValue 屬性以及觸發一個 update:modelValue 事件

<ChildComponent v-model="message" />

<!-- would be shorthand for: -->

<ChildComponent
  :modelValue="message"
  @update:modelValue="message = $event"
/>

如果要改變綁定的屬性名，我們可以將參數傳遞給v-model

<ChildComponent v-model:info="message" />

<!-- would be shorthand for: -->

<ChildComponent :info="message" @update:info="message = $event" />

如果我們想在子組件中用input綁定傳遞過來的數據，并做實時修改那該怎么操作呢？
首先我們不能直接綁定傳遞過來數據，哪怕綁定了也無法做到實時修改，父組件傳遞了那就是傳遞了你如何都影響不到我當前組件的實際數據。而且一般在項目中我們都不會直接對props數據進行綁定修改。我們可以利用個中間值數據去操作，如：

<input v-model='dataDetail'>
export default {
    computed: {
        dataDetail: {
            set(value) {
                this.$emit('update:modelValue',value)
            },
            get() {
                return this.modelValue
            }
        }
    },
}

另外，它可以進行多個綁定：

<ChildComponent v-model:info="message" v-model:content="cons" />
<!-- 相當于 -->
<ChildComponent
    :info="message"
    @update:info="message = $event"
    :content="cons"
    @update:content="cons = $event"
/>