v-model 总结

v-model 是 Vue 中实现双向数据绑定的核心语法糖，主要用于 表单输入元素 和 自定义组件 的数据绑定。以下是其核心规则、使用场景及代码示例：

---

一、v-model 的核心规则

1. 本质：
   v-model 是 :value + @input 的语法糖，自动同步数据和视图。
2. 适用范围：
   • 原生表单元素（如 <input>、<select>、<textarea>）。
   • 自定义组件（需显式实现 modelValue 和 update:modelValue 事件）。
3. 修饰符：
   • .lazy：将 input 事件改为 change 事件（失焦后更新数据）。
   • .number：将输入值转为数字类型。
   • .trim：自动去除输入值首尾空格。

---

二、在不同场景中的使用示例

1. 原生表单元素

(1) 文本输入（<input type="text">）

<template><input v-model="message" placeholder="输入内容"><p>输入的内容是：{{ message }}</p>
</template><script>
export default {data() {return { message: '' }}
}
</script>

(2) 复选框（<input type="checkbox">）

• 单个复选框：绑定布尔值。

  <input type="checkbox" v-model="isAgree">
  <span>{{ isAgree ? '已同意' : '未同意' }}</span>
  

• 多个复选框：绑定数组。

  <input type="checkbox" value="vue" v-model="skills">
  <input type="checkbox" value="react" v-model="skills">
  <p>选择的技能：{{ skills }}</p>
  

(3) 下拉选择框（<select>）

<select v-model="selectedCity"><option value="beijing">北京</option><option value="shanghai">上海</option>
</select>
<p>选择的城市：{{ selectedCity }}</p>

---

2. 自定义组件

(1) 默认绑定（单个 v-model）

• 子组件：需接收 modelValue 并触发 update:modelValue 事件。

  <!-- CustomInput.vue -->
  <template><input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </template><script>
  export default {props: ['modelValue'],emits: ['update:modelValue']
  }
  </script>
  

• 父组件：直接使用 v-model 绑定。

  <CustomInput v-model="message" />
  

(2) 多个 v-model 绑定（Vue 3 支持）

• 子组件：定义多个属性（如 title 和 content）。

  <!-- CustomForm.vue -->
  <template><input :value="title" @input="$emit('update:title', $event.target.value)"><textarea :value="content" @input="$emit('update:content', $event.target.value)"></textarea>
  </template><script>
  export default {props: ['title', 'content'],emits: ['update:title', 'update:content']
  }
  </script>
  

• 父组件：使用 v-model:属性名 绑定多个值。

  <CustomForm v-model:title="formData.title"v-model:content="formData.content"
  />
  

---

3. 修饰符使用示例

(1) .lazy：失焦后更新数据

<input v-model.lazy="message"> <!-- 输入内容后需失焦才会更新 message -->

(2) .number：转为数字类型

<input v-model.number="age" type="number"> <!-- 输入 "25" → age 为 25（数字类型） -->

(3) .trim：去除首尾空格

<input v-model.trim="username"> <!-- 输入 "  Alice " → username 为 "Alice" -->

---

三、注意事项

1. 自定义组件必须触发事件：
   子组件中需显式触发 update:modelValue 事件（或其他自定义事件），否则数据无法同步。
2. 避免直接修改 Props：
   在子组件中应通过事件修改数据，而非直接修改 modelValue。
3. 复杂数据类型处理：
   如果绑定的数据是对象或数组，需确保父子组件间通过引用同步（或使用深拷贝）。

---

四、总结

场景	语法	示例
原生表单元素	v-model="data"	<input v-model="message">
自定义组件（单个绑定）	v-model="data"	<CustomInput v-model="message">
自定义组件（多个绑定）	v-model:propName="data"	<CustomForm v-model:title="title">
使用修饰符	v-model.modifier="data"	<input v-model.trim="username">

通过 v-model 可以高效实现双向数据绑定，但需注意其底层原理是 单向数据流（父 → 子通过 Prop，子 → 父通过事件）。