今天介紹一些 v-model 在 v3 一些改動以及新特性

v-model 搭配 Computed 使用

這個範例只有在 Vue 3 的文件中出現
不過看起來 Vue 2 也可以用一樣的概念來處理相同邏輯。

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
})

v-model 的預設 prop 以及 event 名稱改變

Vue 3 前 v-model 是以下的簡寫

<MyInput :value="name" @input="newValue => this.name = name" />

Vue 3 後 v-model 是以下的簡寫

<MyInput :modelValue="name" @update:modelValue="newValue => this.name = name" />

移除 v-bind 的 .sync 修飾詞，改為配合參數使用的 v-model

Vue 2

<MyComponent :title.sync="pageTitle" />

Vue 3

<MyComponent v-model:title="pageTitle" />

雖說帶 sync 的 Prop 感覺跟 v-model 是同一個東西，所以我平常沒在用，
但也因為現在這個改動，使得原件可以同時綁定多個 v-model，如下：

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

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

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>