vue v-model原理

v-model本质上是一个语法糖，它负责监听用户的输入事件以更新数据

表单控件的v-model

从表单控制角度来讲，实际上是帮我们做了两件事：

1. 给组件默认增加一个属性，值为用户传入v-model的变量，并将它作为双向绑定的承载者，比如 :property="xxx"
2. 给组件增加一个监听事件，当监听的值发生改变时，会将监听的值赋予v-model的变量，比如 @listenerEvent="xxx = $event.target.value"

看到上面，是不是觉得简单？ 哼哼，再来看看官网的用法：https://cn.vuejs.org/v2/api/#v-model

发现v-model并不只是用在input框上了，还用在select等表单控件类型和自定义组件上，我们知道，select的值变化监听是在change事件上了，check-box是要看checked属性是否为true了，还有自定义组件...！

ok,继续看官网 https://cn.vuejs.org/v2/guide/forms.html ：
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

于是乎，我模拟了下input的实现，select的v-model实现的作用大概是这样的：

  Volvo
  Saab
  Opel
  Audi




  Volvo
  Saab
  Opel
  Audi

其它组件类似，不再演示，感兴趣的可以自己实现一下

自定义组件的v-model

那么自定义祖件的原理呢，我们再看下官网的解析：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6

自定义组件，其实就是使用了input中的v-model原理来实现的：

下面，我们以一道面试题来试手

v-model面试题目

实现一个自定义组件，使用v-model="text"来实现：text中的值使用空格隔开，分开用来控制组件内两个输入框的显示，比如text值为"面试题 v-model"，组件内实现两个输入框，值分别为“面试题”和“v-model”，然后实现双向绑定

image.png