父组件中

<template>
    <p>{{name}}</p>
    <CustomVModel v-model="name" />
</template>
<script>
import CustomVModel from '@/components/CustomVModel'
export default {
  components: {
    CustomVModel
  },
  data () {
    return {
      name: '你的名字'
    }
  }
}
</script>

子组件中

展示如何自定义v-model

<template>
    <input 
    type="text" 
    :value="content" 
    @input="$emit('change', $event.target.value)" 
  />
</template>
<script>
export default {
    model: {
      prop: 'content',
    event: 'change'
  },
  props: {
      content: String
  }
}
</script>

所以，父组件中这样使用
<CustomVModel v-model="name" />
这里的 name 的值将会传到这个名为 content 的prop。同时当 CustomVModel 触发一个 change 事件并附带一个新值的时候，这个 name 的实例将会被更新

实例 颜色选择器