Vue的model选项

5,164 阅读1分钟

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 选项可以回避这些情况产生的冲突。