v-model 是 Vue.js 中的一个非常强大的指令，它主要用于在表单输入和应用状态之间创建双向数据绑定。这意味着，当用户在表单输入中修改数据时，绑定的数据会自动更新；反之，当绑定的数据变化时，输入也会相应地更新。

基本原理

v-model 实际上是一个语法糖，它背后做了几件事情来实现双向绑定：

1. 监听 input 事件：v-model 会根据控件类型自动选取正确的方法来更新元素。对于 <input>, <select>, 和 <textarea>，它默认使用 value 属性作为 prop，并监听 input 事件来更新数据。

2. 更新数据：当在表单控件上触发 input（或其他类似事件，如 change 对于 <select>）时，v-model 会将新的值赋给绑定的数据属性。

3. 渲染视图：由于 Vue 的响应式系统，当绑定的数据发生变化时，视图会自动更新以反映最新的数据。

自定义组件中的 v-model

在自定义组件中，v-model 同样可以工作，但需要组件显式地定义如何接收 prop 和触发事件。默认情况下，v-model 使用 value 作为 prop 和 input 作为事件，但你可以通过 model 选项来自定义它们：

Vue.component('custom-input', {
  props: ['value'],
  model: {
    prop: 'customValue',
    event: 'customInput'
  },
  methods: {
    updateValue(e) {
      this.$emit('customInput', e.target.value);
    }
  },
  template: `
    <input
      :value="customValue"
      @input="updateValue"
      type="text"
    >
  `
});

在这个例子中，虽然模板中使用了 :value="customValue" 和 @input="updateValue"，但由于 model 选项的指定，使用 <custom-input v-model="something"> 时，实际上绑定的是 customValue prop，并在内部 updateValue 方法中通过 $emit('customInput', ...) 触发更新。

注意事项

• 并非所有表单输入都触发 input 事件。例如，对于 <select multiple>，你可能需要监听 change 事件。
• 在自定义组件中，确保你正确处理了 prop 和事件的传递，以便 v-model 能够正常工作。
• Vue 3 引入了 Composition API，其中可以使用 ref 或 reactive 来创建响应式数据，并通过 watch 或 computed 来实现更复杂的逻辑，但 v-model 的基本工作原理保持不变。