发生变革：
- 在自界说组件上使用时，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.vueexport 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"/> |
