Vue 中 v-model 的原理是什么？

推荐答案

在 Vue 中，v-model 是一个语法糖，用于在表单元素或自定义组件上实现双向数据绑定。它的原理是通过 v-bind 绑定一个值到 value 属性，并通过 v-on 监听 input 事件来更新数据。

对于原生表单元素（如 input、textarea、select），v-model 会根据元素类型自动绑定到 value 属性，并监听 input 或 change 事件来更新数据。

对于自定义组件，v-model 默认会绑定到 value prop，并监听 input 事件。开发者可以通过 model 选项自定义 v-model 的 prop 和事件名称。

本题详细解读

1. 原生表单元素中的 v-model

对于原生表单元素，v-model 的实现可以简化为以下代码：

<input :value="message" @input="message = $event.target.value" />

• :value="message"：将 message 数据绑定到 input 元素的 value 属性。
• @input="message = $event.target.value"：监听 input 事件，当用户输入时，更新 message 数据。

2. 自定义组件中的 v-model

对于自定义组件，v-model 的实现可以简化为以下代码：

<custom-component :value="message" @input="message = $event"></custom-component>

• :value="message"：将 message 数据绑定到 custom-component 的 value prop。
• @input="message = $event"：监听 input 事件，当组件内部触发 input 事件时，更新 message 数据。

3. 自定义 v-model 的 prop 和事件

如果需要在自定义组件中使用不同的 prop 和事件名称，可以通过 model 选项进行配置：

// www.javascriptcn.com code example
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  }
}

在这个例子中，v-model 会绑定到 checked prop，并监听 change 事件。

4. v-model 的修饰符

v-model 还支持一些修饰符，如 .lazy、.number 和 .trim，它们可以改变 v-model 的行为：

• .lazy：将 input 事件改为 change 事件，延迟更新数据。
• .number：将输入值转换为数字类型。
• .trim：自动去除输入值的前后空格。

<input v-model.lazy="message" />
<input v-model.number="age" />
<input v-model.trim="username" />

通过这些修饰符，开发者可以更灵活地控制 v-model 的行为。