自定义组件的 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

model 选项可以用来避免这样的冲突：

// 子组件
<template>
  <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)">
</template>

<script>
  export default {
    name:'base-checkbox',
    props: {
      checked: Boolean
    },
　// 这个model选项就是用来改变默认的v-mode的绑定属性和抛出事件的
    model: {
      prop: 'checked',
      event: 'change' 
    }
  }
</script>

 在这个组件上使用 v-model 的时候：

// 父组件
<base-checkbox v-model="lovingVue"></base-checkbox>

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

1、v-model默认语法糖等同于 :value="price" @input="price=$event.target.value" 一般用于input等组件；

2、此处由于是checkbox,使用默认的就不合适了，所以数值绑定checked事件绑定change；