v-model实现父组件与子组件的数据双向绑定原理总结

vue代码优化（一）

最近项目开发中，由于需求需要自己封装了很多自定义组件，虽然复用性很高，但是，父组件获取子组件的值，需要通过emit触发的方法来获取，实际应用中比较繁琐。特地又去了解vue的双向绑定的原理与v-model的应用场景。
一、v-model
1、v-model的原理
通过查询资料，发现v-model实际上是vue的一个语法糖，其中包含了两个操作，一是v-bind绑定一个value属性，v-on绑定一个input事件。如

<input v-model="formValue">

会被编译成

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

了解到v-model的编译原理后，发现自定义父组件通过v-model 也会实现如下的编译原理，如
自定义组件

<custom-component v-model="variable"></custom-componment>

会被编译成

<custom-component v-bind="variable" v-on:input="variable = $event.target.variable"></custom-componment>

通过编译后的代码可得出，v-model 实现了父子组件的prop属性传值，emit触发接收值，达到了数据绑定的效果。着实是好用啊。

以上对vue组件进行优化时的个人总结，仅作记录，不喜勿喷！！！