v-model 使用

v-model 是一个用于实现表单元素和组件双向数据绑定的指令。

核心作用是将表单输入的值与 Vue 实例的数据属性进行动态绑定，当用户修改输入时，数据会自动更新，反之亦然。

---

一、基本用法

v-model 常用于表单元素（如 <input>、<textarea>、<select>），直接绑定一个数据属性：

<template>
  <input v-model="message" placeholder="输入内容">
  <p>输入的内容是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  }
};
</script>

---

二、v-model 的原理

v-model 是语法糖，底层基于 value 属性 + input 事件 实现双向绑定。例如，上述代码等价于：

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

---

三、不同类型表单元素的处理

v-model 会根据不同的表单元素自动适配对应的属性和事件：

元素类型	绑定的属性	触发的事件
<input type="text">	value	input
<textarea>	value	input
<input type="checkbox">	checked	change
<input type="radio">	checked	change
<select>	value	change

---

四、修饰符（Modifiers）

v-model 支持修饰符，用于处理输入值的特定需求：

1. .lazy

   将 input 事件改为 change 事件（输入完成后更新数据）：

   <input v-model.lazy="message">

2. .number

   自动将输入值转为数值类型：

   <input v-model.number="age" type="number">

3. .trim

   自动去除输入值的首尾空格：

   <input v-model.trim="username">

4. 自定义修饰符

   子组件通过 this.$options.model.modifiers 访问修饰符，并根据修饰符对输入值进行加工处理。

---

五、在自定义组件中使用 v-model

在 Vue 2 中，自定义组件可以通过 model 选项定义 v-model 的绑定行为：

1. 父组件：

   <CustomInput v-model="message" />

2. 子组件：

   <template>
     <input 
       :value="value" 
       @input="$emit('input', $event.target.value)"
     >
   </template>
   
   <script>
   export default {
     model: {
       prop: "value",   // 默认是 'value'
       event: "input"   // 默认是 'input'
     },
     props: ["value"]
   };
   </script>

---

六、与 .sync 修饰符的区别

• v-model ：用于单个数据的双向绑定（默认绑定 value 和 input）。
• .sync 修饰符 ：用于多个属性的"双向绑定"（通过 update:propName 事件）。

<!-- 父组件 -->
<ChildComponent :title.sync="pageTitle" />

<!-- 子组件触发更新 -->
this.$emit('update:title', newTitle);

---

七、常见问题

1. 为什么输入类型为 number 时，绑定的值仍是字符串？

   使用 .number 修饰符或手动转换类型：parseInt(value)。

2. 如何在一个组件中绑定多个 v-model？

   Vue 2 不支持多个 v-model，但可以通过 .sync 修饰符实现多属性双向绑定。

---

总结

• v-model 是 value + input 事件的语法糖。
• 支持 .lazy、.number、.trim 修饰符。
• 自定义组件通过 model 选项配置 prop 和 event。
• 在 Vue 2 中，一个组件只能有一个 v-model，多数据流用 .sync。

掌握 v-model 的使用和原理，能更高效地处理表单和组件间的数据交互！