Vue 3.0 v-model

vicky.yu

#使用 v-bind.sync
在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：

this.$emit('update:title', newValue)
如果需要的话，父级可以监听该事件并更新本地 data property。例如：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<ChildComponent :title.sync="pageTitle" />
#3.x 语法
在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />
<!-- 简写: -->
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>
#v-model 参数
若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个 argument 传递给 model：

<ChildComponent v-model:title="pageTitle" />
<!-- 简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
v-bind anatomy

这也可以作为 .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"
/>
#v-model 修饰符
除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：

<ChildComponent v-model.capitalize="pageTitle" />
我们可以在 Custom Events 部分中了解有关自定义 v-model 修饰符的更多信息。

#迁移策略
我们推荐：

检查你的代码库中所有使用 .sync 的部分并将其替换为 v-model：
  <ChildComponent :title.sync="pageTitle" />
  
  <!-- 替换为 -->
  
  <ChildComponent v-model:title="pageTitle" />
对于所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue
  <ChildComponent v-model="pageTitle" />
  // ChildComponent.vue
  
  export default {
    props: {
      modelValue: String // 以前是`value：String`
    },
    methods: {
      changePageTitle(title) {
        this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
      }
    }
  }
#下一步
更多新的 v-model 语法相关信息，请参考：

在组件中使用 v-model
v-model 参数
处理 v-model 修饰符