vue3 新特性--v-model

• 非兼容變更：用於自定義組件時，v-model 的 prop 和事件默認名稱已更改
  • prop: value -> modelValue
  • 事件: input -> update:modelValue
• 非兼容變更：v-bind 的 .sync 修飾符和組件的 model 選項已移除，可在 v-model 上加一個參數代替
• 新增：可以在同一組件上使用多個 v-model 綁定
• 新增：可以自定義 v-model 修飾符

3.1 vue2 語法

vue2 中，在組件上使用 v-model 相當於綁定 value prop 並觸發 input 事件

<ChildComponent v-model="pageTitle" />
<!-- 等價於 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

3.1.1 model 選項配置修改雙向綁定

如果想要更改 prop 或事件名稱，則需要在 ChildComponent 組件中添加 model 選項

<!-- ParentComponent.vue -->
<ChildComponent v-model="pageTitle" />
<!-- 等價於 -->
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

// ChildComponent.vue
export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 這將允許 `value` 屬性用於其他用途
    value: String,
    // 使用 `title` 代替 `value` 作為 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

3.1.2 v-bind.sync 修改雙向綁定（vue3 中已移除）

在某些情況下，我們可能需要對某一個 prop 進行“雙向綁定”，可以在子組件中拋出 update:myPropName 事件，父組件使用 :myPropName.sync 實現對 myPropName 屬性的雙向綁定

// ChildComponent.vue
this.$emit('update:title', newValue)

<!-- ParentComponent.vue -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
<!-- 等價於 -->
<ChildComponent :title.sync="pageTitle" />

3.2 vue3 語法

在 vue3 中，自定義組件上的 v-model 相當於傳遞了 modelValue prop 並接收拋出的 update:modelValue 事件

<ChildComponent v-model="pageTitle" />
<!-- 等價於 -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>

如果需要更改 model 名稱，可以為 v-model 傳遞一個參數，作為組件內的 model 選項代替

<ChildComponent v-model:title="pageTitle" />
<!-- 等價於 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

這也可以作為 .sync 修飾符的替代，而且允許我們在自定義組件上使用多個 v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 等價於 -->
<ChildComponent 
    :title="pageTitle" @update:title="pageTitle = $event"
    :content="pageContent" @update:content="pageContent = $event" />