v-model 是 Vue 实现数据双向绑定最好的一个指令，但是 v-model 本质上不过是语法糖。

示例：

<div>
  <span>{{msg}}</span>
  <input v-model="msg">
</div>

new Vue({
  el: '#app',
  data: {
    price: ''
  }
})

v-model 的真正实现如下：

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

• :value="msg" 使用 v-bind 将 msg 绑定到 input 的 value 值上，这是单向绑定，msg 可以改变 input 的 value，但是 input 的 value 值不可以改变 msg
• 使用 v-on 监听 input 事件，输入内容时单向改变 msg 的值。

自定义组件的 v-model

自定义组件 CustomVModel.vue ：

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

<script>
export default {
  model: { // 改变v-mdel默认绑定的属性和事件
    prop: 'text1',
    event: 'change1'
  },
  props: {
    text1: String,
    default() {
      return ''
    }
  }
}
</script>

使用自定义组件的父组件：

<div>
  {{msg}}
  <CustomVModel v-model="msg" />
</div>

因为 CustomVModel 组件中重定义了v-model的属性，因此 <CustomVModel v-model="msg"/> 的本质是 <CustomVModel :text1="msg" @change1="handleChange1" />，handleChange1 函数如下：

handleChange1(val) {
  this.msg = val
}