组件model:
允许一个自定义组件在使用v-model时定制prop和event 默认情况下,一个组件上的v-model会吧value用作prop且把
input用作event ,但是一些输入类型比如单选框复选框按钮可能想要使用value prop来表达不同的目的。
使用model选项可以回避这些情况产生的冲突
input默认作为双向绑定的跟新事件,通过$emit可以更新绑定的值
<my-switch v-model="val" />
export detault {
props:{
value:{
type:Boolean,
default:false
}
},
methods:{
sitchChange(val){
this.$emit("input",val)
}
}
}
修改组件的model选项,自定义绑定事件和变量
<my-switch v-model="num" value="some value" />
export default {
model:{
prop:"num",
event:"update"
},
props:{
value:{
type:String,
value:''
},
num:{
type:Number,
default:0
}
},
methods:{
numChange(){
this.$emit('update',this.num++)
}
}
}
文档::https://cn.vuejs.org/v2/api/#model