Vue v-model原理解析

  从最初学习Vue就知道v-model可以实现双数据绑定,但它能实现绑定的原理到底是什么呢?通过查看官方文档和各种博客资料,以下是我的理解。

  根据官方文档介绍,v-model本质上就是语法糖,即利用v-model绑定数据后,其实就是既绑定了数据,又添加了一个input事件监听,如下:

 

当在input元素中使用v-model实现双数据绑定,其实就是在输入的时候触发元素的input事件,通过这个语法糖,也能够实现父子组件数据的双向绑定,代码如下:

父组件

子组件

通过v-bind把父组件的数据绑定到了子组件的props属性中,而在props上默认用value取值,然后通过$emit触发事件input,因为v-model绑定的事件是input,故在子组件上触发了父组件的input事件,通过触发事件来进行传值,实现了父子组件数据的双向绑定,相对于直接使用v-bind以及自定义事件代码量有所减少。

 

posted @ 2019-01-12 17:19 进击的大白菜 阅读(...) 评论(...) 编辑 收藏