vue数据双向绑定的原理 v-model

v-model双向数据绑定的原理

表单的双向数据绑定

v-model是一个语法糖，它是通过两个事件指令来实现的: v-bind 和@input

<input :value="xx" @input="xx = $event.target.value">

bind响应式读取data数据，input监听inp的value值的改变，响应地更改data数据

父子组件的双向数据绑定

因为v-model是语法糖，其全写是 :value="xx" @input="xx"
利用重命名
子组件props名称写value，就可以读取父组件v-model的value值

子组件自定义事件写input,就可以传值给父组件的@input事件

父组件：

<inp v-model = "xxx" />

子组件：

<input :value="value" @input="$emit('input',$event.target.value)">