Vue model的本质

v-model的本质

model

• 详细：

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

1. v-model到底干了什么事
   1. 绑定数据
   2. 绑定事件
   3. 接收参数
   4. 修改数据

知识点 - sco

• Example：

  Vue.component('my-checkbox', {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      // 这允许将“value”属性用于不同的目的值：字符串，
      // 使用“checked”作为代替“value”的prop`
      checked: {
        type: Number,
        default: 0
      }
    },
    // ...
  })
  

  <my-checkbox v-model="foo" value="some value"></my-checkbox>在View中
  

  上述代码相当于：

  <my-checkbox
    :checked="foo"
    @change="val => { foo = val }"
    value="some value">
  </my-checkbox>
  

附一张Demo代码的图片