Vue.js 双向绑定原理：深入解析 v-model

在Vue.js中，v-model是一个指令，它创建了一个双向绑定，它可以用在表单类元素（如input, textarea, select）上创建双向数据绑定。

v-model实质上是一个语法糖，它在内部为不同的输入类型自动处理不同的方法，如文本输入框使用value属性和input事件，复选框使用checked属性和change事件。

以下是一个简单的例子，展示如何使用v-model来创建一个双向绑定：

<template>
  <div>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，v-model绑定了message变量，无论输入框中的值如何变化，message变量都会实时更新，同时如果message变量发生变化，输入框中的内容也会更新。

如果你希望自定义v-model的行为，可以使用.lazy修饰符，它可以改变事件从输入框触发的时机为失去焦点时：

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

还可以使用.trim修饰符，自动过滤输入框的首尾空格：

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

最后，你可以直接在组件上使用v-model，这样可以避免在每个子组件上都使用$emit和$on：

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

在custom-input组件内部，你需要使用this.$emit('input', value)来更新值，并且确保在组件被创建时this.$emit('input', this.value)被调用，以确保父组件可以接收到初始值。