浅谈v-model双向绑定

vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
  1. v-bind绑定一个value响应式数据
  2. v-on指令给当前元素绑定input事件

自定义组件实现v-model

//  拆解如下
<my-component :value="price" @input="price = $event.target.value"></my-component>

//  根据这个我们可以在子组件中，进行拼凑value属性，input方法。
Vue.component('my-component', {
  template: `
    <span>
      <input
        type="text"
        :value="value"
        @input="$emit('input', $event.target.value)"
      >
    </span>
  `,
  props: ['value'],
})