详解vue中的v-model

序：v-model是v-bind和v-on:input的结合，即监听了表单的input事件，然后修改value属性对应的值

一、vue单文件中使用v-model

众所周知，当我们使用v-bind绑定prop时，数据流的流向是从model层流向view层，被v-bind绑定的prop会从data中读取属性值；

那么如何实现既能让数据从model层流向view层，又能从view层流向model层的双向数据绑定呢？这个时候就需要使用到指令v-model,指令v-model的本质是一个语法糖，他是:value & @ input 的简写形式；

具体代码如下：

二、父子组件传值时使用 v-model

注：v-model <=> v-bind:value & @input = 'value = $event'

父组件

子组件

三、进阶

以上这种方式实现的父子组件的v-model通信，但是限制了子组件中props接收的属性名必须为value和emit触发的必须为input，这样容易有冲突，特别是在表单里面。所以，为了更优雅的使用v-model通信，可以在子组件中使用model选项;

子组件进阶代码