v-model双向绑定原理

表单实现双向绑定

        

1. 原理

分两步骤

v-bind绑定一个value属性

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

可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体

组件上的双向绑定

1. 原理

v-model绑定在组件上的时候做了以下步骤

在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性

子组件内使用 prop 创建 创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。

子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值

v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上