Vue的model选项

1. model选项是什么？

model是Vue修改v-model绑定属性和默认绑定方法的选项；

v-model语法糖：

<input v-model="num" type="text" />
等价于=>
<input v-bind:velue="num" v-on:input="$event.target.value" />

model默认情况下：{prop:’value’,event:’change’}，默认绑定输入框value属性和change方法；修改model属性可以自定义属性，修改触发方式。

2. 如何使用

export default {  //model修改默认绑定属性和方法
  model: {    prop: "checked",    event: "hahaha"  },
  //对应model.prop绑定的属性  props: {    checked: Boolean  },
  //对应model.event绑定的方法，this.$emit方式执行该方法
  methods: {    clickFirstClass() {      this.$emit("hahaha", true);    }  }
}

3. 常见使用场景

因为model默认绑定的是输入框value属性，一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。