Vue中的v-model理解

官方文档讲的比较模糊，自己通过例子进行理解。

v-model是语法糖

首先明确一点，v-model仅仅是语法糖。

还要理解$emit的用法：

vm.$emit(event,[...args])

触发当前实例上的事件。附加参数都会传给监听器回调。

v-model在 普通input上

一定要明确在给 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件（具体参考语法糖的解释）

v-model用在组件上

这里是一个自定义组件currency-input,父组件的 price 的初始值是 100，更改子组件的值能实时更新父组件的 price

html:

 
 {{price}}

js:

Vue.component('currency-input', {
 template: `
  
   
    @input="$emit('input', $event.target.value)"
   >
  
 `,
 props: ['value'],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
})

var demo = new Vue({
 el: '#demo',
 data: {
  price: 100,
 }
})

这里的js代码，props中接受了value，但是在组件中并没有传入value，而且在input中是监听了input事件，但是并没有在父组件中定义input。

要理解这个，就要回到语法糖的问题上，

本质上等价于：

所以可以看到value和input了

理解v-model在组件中的实现，给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名

代码分析

所以这里在js中@input="$emit('input', $event.target.value)" 子组件在监听input事件发生的时候（即@input）,向父组件传递了input($emit中的input)事件，并且传递了当前子组件的price值。

而在父组件中，监听了自定义事件input，当自定义事件input触发后，将当前父组件自身的price值改为子组件中$emit上来的值（$event.target.value 是作为$emit传递的参数，所以是arguments[0]）

v-model存在的问题

对于复选框或者单选框的常见组件时，由于v-model默认传的是value，不是checked，触发事件也不是oninput而是onchange

• 对于单纯的input type='checkbox'
  
• 当用到组件上时：

Vue.component('my-checkbox', {
 tempalte: ``
 props: ['value'],
})

这个时候需要Vue的model选项
model选项可以指定当前的事件类型和传入的props

所以可以通过这么改进：

Vue.component('my-checkbox', {
 tempalte: `
        @change="$emit('balabala', $event.target.checked)"
        :checked="value"
       />`
 props: ['checked'], //这里就不用 value 了，而是 checked
 model: { // model选项来指定
  prop: 'checked',
  event: 'balabala'
 },
})