vue双向绑定和双向修改写法总结

2.x 双向绑定

//使用value和input老式写法
<ChildComponent v-model="pageTitle" />
//是以下的简写
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

//不使用value和input的写法，title代替value，change代替input
<ChildComponent v-model="pageTitle" />
//是以下的简写
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

2.x sync双向修改

<ChildComponent :title.sync="pageTitle" />
//是以下的简写
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

//组件内部使用update:title事件更新prop的值
this.$emit('update:title', newValue)

3.x 双向绑定

//3.x的双向绑定使用modelValue和@update:modelValue，不再使用value和input
<ChildComponent v-model="pageTitle" />
//是以下的简写
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />


//3.x的v-model可以代替.sync写法，指定属性
<ChildComponent v-model:title="pageTitle" />
//是以下的简写
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />


//3.x的v-model可以对多个属性进行双向绑定
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
//是以下的简写
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

 

出处：浅谈 Vue3 中的 v-model 和 sync 修饰符