vue自定义组件v-model双向绑定

一、model官方文档

1. 类型：{ prop?: string, event?: string }
2. 详细：
   允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
3. Example：

 Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

4. 以上代码块相当于

二、代码示列

1. 父组件

2. 子组件

3. 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，子组件代码可改为

三、子组件读取并修改父组件传的prop，且同步到父组件

直接v-model绑定报错，如图，子组件中不能直接修改父组件传的prop

使用computed计算属性重新赋值：

地址：vue官方文档