Vue.js组件中v-model的使用

在 Vue.js 中，常常会使用 v-model 实现表单的双向数据绑定功能。

使用 Element 组件时，组件库中的含有输出类型的自定义组件，都会使用v-model指令，该指令绑定的元素就是组件的输出结果。好比 select选择器

日常只使用v-model作表单元素的数据绑定，没有仔细研究过这背后的原理，不是很理解自定义组件是怎么实现这个功能的。

查找了一下相关资料，其实 Vue.js 的官网上有教程有相关的资料。

使用自定义事件的表单输入组件

v-model 实际上是一个语法糖，这背后其实作了两个操做

1. v-bind 绑定一个 value 属性

2. v-on 指令给当前元素绑定 input 事件

在原生表单元素中

<input v-model='something'>

就至关于

<input v-bind:value="something" v-on:input="something = $event.target.value">

当input接收到新的输入，就会触发input事件，将事件目标的value 值赋给绑定的元素

在自定义组件中

<my-component v-model='something'></my-componment>

至关于

<my-component v-bind:value='something' v-on:input='something = arguments[0]'></my-component>

这时候，something接受的值就是input是事件的回掉函数的第一个参数
因此在自定义的组件当中，要实现数据绑定，还须要使用[$emit]去触发input的事件。

this.$emit('input', value)