持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情juejin.cn/post/714765…

v-model可以用在input上，也可以用在组件上

用在input上

v-model是语法糖，用在input上实现与data的双向绑定，当input中的值发生改变时data中的数据也会发生改变，data改变input里的值也会自动更新。它是v-bind：value（动态属性，可用作父向子组件传值）绑定响应式数据。触发v-on:change/input事件并传递数据。
示例：

用在组件上

用在组件上可以实现双向传值，和自定义事件相结合来创建支持v-model的自定义输入组件（自己封装的表单组件）
v-model可以在封装的输入组件用于获取输入表单的数据，比如一个登录注册的一个组件放在项目中可以获取登录注册的组件中的值。
写法：在自定义输入组件中定义v-model，与data实现双向绑定。设置一个事件：例如点击事件，在事件中通过this.$emit()来传递数据，第一个参数是绑定的那个自定义事件，第二个是要传递的数据。在父组件中的子组件上定义两个：一个是：v-bind：value=“父组件的data”（传给子组件作为表单的默认值，子组件通过props来接，然后赋值给data。）。另一个是自定义事件，这里用v-on：input=“父组件的data=>$event” ($event就是子组件传过来的数据）。前面说过v-model是语法糖。所以这里可以将两个合并成一个：v-model=“父组件的data”
示例：

注意：如果父组件中的子组件上直接使用v-model的话，那么子组件的props的值一定要是value。而this.$emit（）的自定义事件名一定要是input。