vue中v-model使用

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

1. 接收一个value prop
2. 触发input事件，并传入新值

在原生表单元素中：

<input v-model="inputValue">

相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中

<my-component v-model="inputValue"></my-component>

相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。

this.$emit('input', value)

小结：v-model本质上是一个语法糖。如下代码<input v-model="message">本质上是<input :value="message" @input="message = $event.target.value">，其中@input是对<input>输入事件的一个监听，:value="message"是将监听事件中的数据放入到input 。v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。