vue 3.0 v-model

vue 3.0 v-model","p":false,"slid":"152625165383735","queryid":"0xa28acfd0c43837

Vue 3.0 中的 v-model 是一个语法糖，它可以让我们更加方便地实现双向数据绑定。它是一个特殊的指令，用于在表单元素上创建双向数据绑定。v-model 指令会忽略所有表单元素的 value、checked、selected 特性，并把它们的值绑定到一个 Vue 实例上的数据。

Vue 3.0 中的 v-model 支持多种表单元素，包括 input、textarea、select 等。当使用 v-model 时，Vue 会根据表单元素的 type 属性来自动选取正确的方法来处理数据。例如，对于 input 元素，Vue 会选取 value 属性和 input 事件来处理数据；对于 checkbox 元素，Vue 会选取 checked 属性和 change 事件来处理数据。

此外，v-model 还能够自动进行修饰符的处理。修饰符是由 . 符号连接在 v-model 指令后面的特性（例如 .lazy ）。修饰符能够帮助我们在不同情况下使用不同的方法来处理数据。例如 .lazy 修饰符能够帮助我们使用 change 而不是 input 事件来监听用户输入。

// 申明一个文本输入
<input type="text" v-model="message">
// 申明一个带有 lazy 修饰语的文本输入
<input type="text" v-model.lazy="message">

#概览

就变化内容而言，此部分属于高阶内容：

• 非兼容：用于自定义组件时，v-modelprop 和事件默认名称已更改：

• prop：value -> modelValue；

• event：input -> update:modelValue；

• 非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；

• 新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定；

• 新增：现在可以自定义 v-model 修饰符。

更多信息，请见下文。

#介绍

在 Vue 2.0 发布后，开发者使用 v-model 指令必须使用为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。

在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 model。

在 Vue 3 中，双向数据绑定的 API 已经标准化，减少了开发者在使用 v-model 指令时的混淆并且在使用 v-model 指令时可以更加灵活。

#2.x 语法

在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件：

如果要将属性或事件名称更改为其他名称，则需要在 ChildComponent 组件中添加 model 选项：

// ChildComponent.vue


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

所以，在这个例子中 v-model 的简写如下：

#使用 v-bind.sync

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

this.$emit("update:title", newValue)

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

#3.x 语法

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

#v-model 参数

若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个 argument 传递给 model：

这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model。

#v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：

我们可以在 Custom Events 部分中了解有关自定义 v-model 修饰符的更多信息。

#迁移策略

我们推荐：

• 检查你的代码库中所有使用 .sync 的部分并将其替换为 v-model：

• 对于所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue

  // 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 修饰符