一文读懂vue中的v-model-创新互联

这篇文章运用简单易懂的例子给大家介绍一文读懂vue中的v-model，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

1. v-model原理

vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分：

通过props设置子组件的状态
通过监听子组件发出的事件改变父组件的状态，从而影响子组件的props值
通过以上两个部分，实现了父组件的状态和子组件状态进行了绑定的效果。

1.1 demo

v-model使用示例

 
 
 
 
 

 
 

  
这里是父组件的状态:
  
{{content}}