Vue2中v-model浅析以及自定义v-model

我们经常在vue的项目中使用到v-model这个双向数据绑定的属性。而这个属性实际上是一个语法糖。

以上的两行代码其实它们是等价的。

当我们编写自己的组件的时候，往往会使用到自定义的v-model。

1、v-model在文本框中使用

//子组件

//父组件

2、v-model在复选框当中使用

//子组件

//父组件

从以上代码我们可以看出，改变复选框状态的方法为change。与文本框的input方法不一样。所以从上面复选框的子组件代码当中我们设置了model属性。这个model的属性默认为

model:{
  prop:'value',
  event:'input'
}

所以我们在文本框当中不需要设置该属性。而在复选框中我们需要去设置它。
而这个model是什么意思呢？ 这个model属性实际上它指明了v-model的prop以及事件名称。
举个例子：
当我们将model设置为

  model:{
    prop:'today',
    event:'blur'
}
// 意味着v-model的如下表示