vue中关于v-model和:model的理解

v-model通常用于input的双向数据绑定 <input v-model=``"parentMsg"``>，也可以实现子组件到父组件数据的双向数据绑定

　　:model是v-bind:model的缩写``<child :model=``"msg"``></child>这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。
　　引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

? 根据我目前的理解来看，v-model可以说是一个语法糖，vue的使用过程中，无论是使用element组件(目前只使用了element组件)。自定义的组件只是组件的一种，不会逃离组件的范围。官方组件可以说是官方自定义的组件。在官方组件中常见的一些写法，在使用自己定义的组件时也可以参考。对于上述文字的理解中，如果结合父子组件之间相互传值来看，v-model和:model的影响很大，这个知识点最大的应用也就体现在父子组件值相互绑定上。

v-model语法糖 v-model其实是一种简写方式，我们常见的有两种v-model，分别是input元素上的v-model 和非input元素上。

input上的v-model:

<input v-model="price"><!-- 下行注释的语法糖 -->
 <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值赋值给 price

对于非input元素呢，这里使用官方的例子

Vue.component(‘base-checkbox‘, {
  model: {
    prop: ‘checked‘,
    event: ‘change‘
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit(‘change‘, $event.target.checked)"
    >
  `
})

父组件

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

这里的change 可以是 input(input元素) click(dialog) 等等事件，具体要看是如何出发元素的状态改变, 注意.self 防止其他因素影响

对于非input元素类型上面的官方例子，实际上可以看作一个父子组件值绑定的一种。

对于这里进行更深入的解读，需要在以后父子组件值绑定的博客里进行解读

vue中关于v-model和:model的理解