vue - v-model

根据官方文档

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取>正确的方法来更新元素。

v-model 两种情况示例

1. 使用在表单元素上

   <input v-model="message" placeholder="edit me">
   

   以上等价于

   <input v-bind:value='message' @input='message=$event.target.value'>
   

   对于input元素，默认使用 value property 和 input 事件。每当输入框内容发生变化时，触发input事件，将最新的value传给message。

   对不同元素，默认使用的东西不同

   v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

   • text 和 textarea 元素使用 value property 和 input 事件；
   • checkbox 和 radio 使用 checked property 和 change 事件；
   • select 字段将 value 作为 prop 并将 change 作为事件。

2. 使用在组件上

   一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

   父组件

   <my-comp v-model='xxx'/>
   以上默认等价于
   <my-comp v-bind:value='xxx' @input='xxx=argument[0]'/>
   

   子组件

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

   也可通过model选项指定prop和event

   model: {
       prop: 'checked',
       event: 'change'
   }
   

   则父组件的v-model的等价形式随之变化，而子组件所触发的事件也需要改变。

与.sync的比较

前面写过一篇浅析.sync修饰符

两者功能十分相似，都是用来实现双向绑定。

两者主要区别在于：

1. .sync不能用于表单元素上，v-model可以
2. 可在同一个元素上重复使用.sync绑定多个变量，但v-model只能绑定一个
3. .sync所监听的事件必须是'update:propName'