Vue v-model原理与 .sync

一句话解释:
双向绑定顾名思义, 使用v-bind实现data=>input, 使用@input事件实现input=>data

1 v-model 用在 input 元素上时

使用
<input v-model="sth" />

原理
<input v-model="sth" />
等价于:
<input :value="sth" @input="sth = $event.target.value" />
//input 元素本身有个 oninput 事件，每当输入框内容发生变化，就会触发 oninput

2 v-model 用在组件上input时, 父子相互通讯

使用
父: <Son v-model="price" />
子: 
<template>
  <span>
   <input ref="input" :value="value" @input="$emit('input', $event.target.value)" >
  </span>
...
props:['value']

原理 
<Son v-model="price" />
等价于:
<Son :value="price" @input="price = arguments[0]" />

就是个语法糖
类似.sync

使用
父: <Son :money.sync="m" />
子: 
<template>
  <span>
   <p @click="$emit('updata:money', money-100)" >{{money}}</p>
  </span>
...
props:['money']

原理 
<Son:money.sync="m" />
等价于:
<Son :money="m" @updata:money="m = $event" />
//在原生事件中，$event是事件对象, 在自定义事件中，$event是传递过来的数据