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)

---