v-model双向绑定原理解析

v-model 是 Vue.js 中用于实现表单元素和数据之间双向绑定的指令。其工作原理如下：

1. 基本概念

v-model 将表单元素的 value 属性与 Vue 实例的数据属性绑定，并在输入时自动更新数据。

2. 实现原理

v-model 本质上是语法糖，结合了 v-bind 和 v-on：

• v-bind: 将数据绑定到表单元素的 value 属性。
• v-on: 监听输入事件，更新数据。

例如：

<input v-model="message">

等价于：

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

3. 不同表单元素的处理

v-model 会根据不同的表单元素自动适配：

• 文本输入框 ( <input type="text"> ) : 使用 value 属性和 input 事件。
• 复选框 ( <input type="checkbox"> ) : 使用 checked 属性和 change 事件。
• 单选按钮 ( <input type="radio"> ) : 使用 checked 属性和 change 事件。
• 下拉菜单 ( <select> ) : 使用 value 属性和 change 事件。

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

在自定义组件中，v-model 默认使用 value 作为 prop，input 作为事件。可以通过 model 选项自定义 prop 和事件名。

例如：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
});

5. Vue 3 中的变化

Vue 3 中，v-model 的默认 prop 改为 modelValue，事件改为 update:modelValue，并支持多个 v-model 绑定。

例如：

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
});

总结

v-model 通过 v-bind 和 v-on 实现双向绑定，自动适配不同表单元素，并在自定义组件中提供灵活的 prop 和事件配置。