vue的v-model的详解

含义： 官方解释一个v-model会默认利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

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 的 property 将会被更新。

上面是官方的解释，但是看着有点不是特别清晰

个人理解： 

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

 v-model 和 :value="test" @input="$emit('input,$event.target.value)"两者是相等的含义

如何自己自定一个v-model的属性，这个时候我们就需要用到object的get和set属性

子组件

<template>
  <div>
    {{status}}
  </div>
</template>
<script>
export default{
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    status : {
      get() {
        return this.value
      },
      set(n) {
        this.$emit('input',n)
      }
    }
  },
  method: {
  }
}
</script>

父组件

<model v-model="test"></model>

如上定义一个子组件，使用props获取父组件的value属性

然后子组件中的新的定义值status通过computed属性去修改这个值得get和set值