深入聊聊Vue指令 v-model

首先，v-model可以理解为 Vue团队提供的一个语法糖，他的实现原理其实是 v-bind和input事件的结合。

首先我们给一个 input 添加两个属性

 <input type="text" :value="msg" @input="msg = $event.target.value" />

运行之后发现和 v-model 的效果一样也实现了双向的数据绑定。

接下来再聊深一点

我们知道，如果往input上绑定v-model回实现数据的双向绑定，那么如果我们给组件绑定 v-model呢？

我们先用 v-bind和input事件绑定在组件中试试

 <model-test :value="msg" @input="msg = $event"></model-test>

要注意的是，这里的value并不是input表单的value属性，他是绑定在组件上的，是一个自定义属性，
同理 input也并不是 input原生事件，而是一个自定义事件，

再之前的文章中有聊过，绑定在组件上的自定义事件，只能通过子组件的 $emit来触发，所以在子组件内，我们添加如下代码

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: ["value"],
};
</script>

注意，这里的value为 input表单的属性，input为DOM的原生事件

然后我们运行代码发现，父子组件的数据实现了双向绑定

这时我们再修改父组件内的属性 将value和input事件替换为 v-model

 <model-test v-model="msg"></model-test>

发现数据双向绑定仍然可以实现

总结：
1. v-model实现的原理其实就是 :value和input事件。
2.v-model并不是只能绑定在表单元素上，也可以绑定在组件标签上，如果绑定在组件标签上，可以实现父子组件数据的同步也可以理解为父子组件的通信。