Vue中v-model原理及组件自定义v-model的详细机制是怎样的？

本文共计3041个文字，预计阅读时间需要13分钟。

VUE中的v-model实现双向绑定，其原理是自动在元素或组件上解析为`value=value`和`@input=input`。

VUE中的v-model可以实现双向绑定，但是原理是什么呢？往下看看吧

根据官方文档的解释，v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为 :value="" 和 @input=""， 就像下面这样

// 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.value"> // 在组件上面时 <div :value="name" @input="name = $event"></div>

1.当在input输入框输入内容时，会自动的触发input事件，更新绑定的name值。

2.当name的值通过JavaScript改变时，会更新input的value值

根据上面的原理，vue就通过v-model实现双向数据绑定

看了前面的解释，对于v-model有了一定的理解。