浅谈 Vue v-model指令的实现原理

vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,

我们来看一下它的效果:

输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化

我们可以参照官方文档的例子 http://cn.vuejs.org/v2/guide/forms.html#文本

我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的

如此神奇的效果是如何实现的呢? 还是参照官方文档

http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是

1. v-bind:绑定响应式数据
2. 触发 input 事件 并传递数据 (核心和重点)

现在我们也想设计自己的表单组件,也想通过 v-model暴露组件的值,怎么做呢?

例如我们要设计一个 自定义货币输入的组件,通过 v-model暴露组件的值,我们可能使用如下的组件代码

然后再使用 这个我们自己定义的组件时,组件内部会暴露出 组件的值到 v-model所绑定的值中去;那它是如何实现的呢?

要搞明白v-model的实现,需要通过查看官方的自定义v-model组件示例的部分代码来进行说明

我们看上图中的代码,有行 $emit的代码,这行代码实际上会触发一个 input事件,'input'后的参数就是传递给v-model绑定的属性的值,也就是说 v-model实现自定义的数据绑定的原理是这样的:

首先,大体的组件结构: