v-model
即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况,它都是一个语法糖,最终会生成一个属性和一个事件
【深入理解 v-model 的原理】当其作用于表单元素时,vue
会根据作用的表单元素类型而生成合适的属性和事件。例如,作用于普通文本框的时候,它会生成value
属性和input
事件,而当其作用于单选框或多选框时,它会生成checked
属性和change
事件。
< input type="radio" v-model="check" />
作为普通文本框
文章图片
作为单选框或多选框的时候
文章图片
v-model
也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个value
属性和input
事件;可以通过组件的model
配置来改变生成的属性和事件
// Comp
const Comp = {
model: {
prop: "number", // 默认为 value
event: "change" // 默认为 input
}
// ...
}