vue2,3：v-model的语法糖

flying robot

于 2025-04-28 10:38:15 发布

阅读量952

点赞数 17

分类专栏： javascript # vue2 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44719499/article/details/147575868

版权

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

8 篇文章

订阅专栏

Vue2的v-model 语法糖

**1. **v-model 的作用

v-model 是 Vue 中用于实现双向数据绑定的指令，主要用于表单元素（如、、）和自定义组件。它简化了数据与视图之间的同步，使得开发者可以方便地处理用户输入。

**2. **v-model 的语法糖

v-model 实际上是 Vue 提供的一种语法糖，它是对 :value 和 @input（或类似的绑定/事件对）的封装。

对于表单元素**：**
- v-model=“data” 等价于：
  html
```
<input :value="data" @input="data = $event.target.value" />
```
  - :value 绑定数据到输入框的值。
  - @input 监听输入事件，并将输入框的值（$event.target.value）更新到绑定的数据 data。
对于自定义组件**：**
- v-model 默认绑定组件的 value 属性（props）和 input 事件：
  html
```
<custom-component v-model="data"></custom-component>
```
  等价于：
  html
```
<custom-component :value="data" @input="data = $event"></custom-component>
```
  - 组件内部通过 this.$emit(‘input’, newValue) 触发 input 事件，更新父组件的数据。

**3. **v-model 的原理

v-model 的核心是 Vue 的响应式系统和事件机制的结合：

响应式数据绑定：
- 当使用 v-model 时，Vue 会将绑定的数据（如 data）设置为响应式。
- 当数据发生变化时，Vue 通过响应式系统更新视图（例如，表单元素的 value）。
事件监听与数据更新：
- Vue 监听表单元素的 input 事件（或其他相关事件，如 change）。
- 当用户输入时，触发事件，Vue 将事件的值更新到绑定的响应式数据。
- 数据更新后，响应式系统通知视图重新渲染，保持数据和视图同步。

组件中的 v-model：

在自定义组件中，v-model 依赖于组件的 value 属性和 input 事件。
组件内部通过 $emit(‘input’, newValue) 通知父组件更新数据。

如果需要自定义 v-model 的属性名和事件名，可以通过组件的 model 选项实现：
javascript

Vue.component('custom-input', {
  model: {
    prop: 'customValue', // 自定义 prop 名
    event: 'customEvent' // 自定义事件名
  },
  props: ['customValue'],
  template: `
    <input
      :value="customValue"
      @input="$emit('customEvent', $event.target.value)"
    >
  `
});

使用时：
html

<custom-input v-model="data"></custom-input>

此时，v-model 会绑定 customValue 属性和监听 customEvent 事件。

**4. **不同表单元素的 v-model 行为

Vue 会根据表单元素的类型调整 v-model 使用的属性和事件：

：绑定 value 属性，监听 input 事件。
或：绑定 checked 属性，监听 change 事件。
：绑定 value 属性，监听 change 事件。

**5. **注意事项

修饰符：
- v-model 支持修饰符，如 .lazy（在 change 事件而非 input 事件触发）、.number（将输入转为数字）、.trim（去除首尾空格）。
- 示例：
  html
```
<input v-model.lazy.number.trim="data" />
```
性能：
- v-model 的双向绑定依赖响应式系统，频繁更新可能影响性能，需谨慎使用。
自定义组件的限制：
- 默认情况下，v-model 假设组件有 value 属性和 input 事件。如果组件逻辑复杂，建议显式使用 :value 和 @input。

**6. **总结

v-model 是 :value 和 @input（或类似绑定/事件对）的语法糖，简化了双向数据绑定的实现。
其原理基于 Vue 的响应式系统和事件机制，通过监听用户输入事件更新数据，并通过响应式系统同步视图。
在自定义组件中，v-model 可以通过 model 选项自定义属性和事件名，灵活适配不同场景。

vue3的v-model 语法糖

Vue 3 中 v-model 的使用

在 Vue 3 中，v-model 依然是实现双向数据绑定的核心指令，主要用于表单元素和自定义组件。相比 Vue 2，Vue 3 的 v-model 引入了一些改进，尤其是在自定义组件的使用上更加灵活，支持多重绑定和自定义修饰符。以下是 Vue 3 中 v-model 的使用详解。

**1. **v-model 在表单元素中的使用

v-model 在表单元素（如、、）上的用法与 Vue 2 类似，仍然是对 :value 和 @input（或类似事件）的语法糖。

基本用法：
html
```
<input v-model="message" />
```
- 等价于：
  html
```
<input :value="message" @input="message = $event.target.value" />
```
- message 是响应式数据（通常通过 ref 或 reactive 定义）。
- 当用户输入时，input 事件触发，message 被更新，视图同步变化。
修饰符： Vue 3 支持与 Vue 2 相同的修饰符：
- .lazy：在 change 事件而非 input 事件更新数据。
- .number：将输入值转换为数字。
- .trim：去除首尾空格。
- 示例：
  html
```
<input v-model.lazy.number.trim="message" />
```
不同表单元素的行为：
- 文本输入（）：绑定 value，监听 input 事件。
- 复选框（）：绑定 checked，监听 change 事件。
- 单选框（）：绑定 value，监听 change 事件。
- 下拉框（）：绑定 value，监听 change 事件。

示例：
html

<script setup>
import { ref } from 'vue';
const message = ref('');
const isChecked = ref(false);
const selected = ref('option1');
</script>

<template>
  <input v-model="message" placeholder="输入文本" />
  <input type="checkbox" v-model="isChecked" />
  <select v-model="selected">
    <option value="option1">选项 1</option>
    <option value="option2">选项 2</option>
  </select>

  <p>输入: {{ message }}</p>
  <p>复选框: {{ isChecked }}</p>
  <p>下拉框: {{ selected }}</p>
</template>

**2. **v-model 在自定义组件中的使用

Vue 3 对组件上的 v-model 进行了重大改进，提供了更灵活的 API 和多重绑定支持。

基本用法

在 Vue 3 中，组件上的 v-model 默认绑定 modelValue 属性（props）和 update:modelValue 事件，而非 Vue 2 的 value 和 input。

父组件：
html

<custom-input v-model="message" />

等价于：
html

<custom-input :modelValue="message" @update:modelValue="message = $event" />

子组件（CustomInput.vue）：
html

<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

子组件接收 modelValue 作为 props。
子组件通过 $emit(‘update:modelValue’, newValue) 触发更新事件，通知父组件更新数据。

多重 v-model

Vue 3 支持在同一组件上使用多个 v-model，通过指定不同的参数（argument）来区分。

父组件：
html

<custom-form v-model:name="name" v-model:age="age" />

子组件（CustomForm.vue）：
html

<script setup>
defineProps(['name', 'age']);
defineEmits(['update:name', 'update:age']);
</script>

<template>
  <input
    :value="name"
    @input="$emit('update:name', $event.target.value)"
    placeholder="输入姓名"
  />
  <input
    type="number"
    :value="age"
    @input="$emit('update:age', $event.target.value)"
    placeholder="输入年龄"
  />
</template>

父组件完整示例：
html

<script setup>
import { ref } from 'vue';
import CustomForm from './CustomForm.vue';
const name = ref('');
const age = ref(18);
</script>

<template>
  <custom-form v-model:name="name" v-model:age="age" />
  <p>姓名: {{ name }}</p>
  <p>年龄: {{ age }}</p>
</template>

自定义 v-model 修饰符

Vue 3 允许为 v-model 定义修饰符，子组件可以通过 props 接收修饰符并处理。

父组件：
html

<custom-input v-model.capitalize="message" />

子组件（CustomInput.vue）：
html

<script setup>
defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
});
defineEmits(['update:modelValue']);

function handleInput(event) {
  let value = event.target.value;
  // 根据修饰符处理输入
  if (modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1);
  }
  $emit('update:modelValue', value);
}
</script>

<template>
  <input :value="modelValue" @input="handleInput" />
</template>

modelModifiers 是一个特殊的 props，包含 v-model 的修饰符（如 { capitalize: true }）。
子组件根据修饰符逻辑处理输入值并触发更新。

**3. **v-model 的原理（简述）

表单元素：v-model 是 :value 和 @input（或其他事件）的语法糖，依赖 Vue 的响应式系统（ref 或 reactive）和事件机制实现数据与视图的同步。
自定义组件：v-model 通过 modelValue 属性和 update:modelValue 事件实现父子组件的双向绑定。多重 v-model 和修饰符通过参数化的 props 和 emits 实现灵活性。
Vue 3 使用 Composition API 和

**4. **注意事项

响应式数据：v-model 绑定的数据必须是响应式的（如 ref 或 reactive），否则无法触发视图更新。
事件命名：组件的 v-model 必须使用 update:xxx 事件命名约定（如 update:modelValue），否则无法正常工作。
性能：频繁的 v-model 更新可能影响性能，建议在复杂场景下使用防抖或节流。
兼容性：Vue 3 的 v-model 与 Vue 2 不完全兼容，迁移时需注意 value/input 改为 modelValue/update:modelValue。

**5. **总结

Vue 3 的 v-model 在表单元素上延续了 Vue 2 的语法糖，但在组件上更灵活，支持多重绑定和自定义修饰符。
组件的 v-model 基于 modelValue 属性和 update:modelValue 事件，配合 defineProps 和 defineEmits 使用。
通过参数化的 v-model（如 v-model:name）和修饰符，开发者可以实现更复杂的数据绑定场景。