关于v-model指令的一个小记,
由于新出的vue3 对它做了一个很好的改进,所以值得记录一下
先看下v-model实现方式
当在原生组件中使用:
<input v-model="val" />
//相当于做了以下
<input :value="val" @input="val=$event.target.value">
当在自定义组件上使用时:
<my-component v-model="val"></my-component>
//相当于做了以下
<my-component :value="val" @input="val=arguments[0]"></my-component>
但是,在自定义组件上使用是存在 一个问题就是它会默认使用组件内props里面的value属性值,以及使用input的这个事件,如下:
<input type="text" :value="value" @input="updataInput">
//...
export default {
props:{
value:String //默认就会使用这个值
},
methods:{
updataInput(){
this.$emit("input",e.target.value); //默认使用input这个事件名
}
}
}
如果要是遇到了“非同寻常”的表单元素 ,如checkbox,可能将value这个属性用作于其他的作用,而我们需要绑定的是checked这个属性值,而要调用的方法是onChange这个事件,vue2是这样来解决的:
添加一个model字段
两个字段:
<input type="checkbox" :checked="checked" @change="updataInput">
//...
export default {
props:{
checked:Boolean
},
model:{
prop:"checked", //你想绑定的事件
event:"change" //你想触发的事件名称
},
methods:{
updataInput(){
this.$emit("change",e.target.checked);
}
}
}
但是2 的处理方法问题还是来了:
- 操作比较繁琐,需要创建新属性
- 一个组件只能绑定一个,不能支持多个
所以3.0 对它的一个改造来了:
丢弃了容易混淆的value属性名和input事件名
使用了很好辨别的属性名【modelValue】
以及很详细的事件名称【onUpdate:modelValue】
<my-component v-model="foo" />
h(Comp,{
modelValue:foo,
"onUpdate:modelValue":value => (foo = value)
})
来试着写一下
<input type="text" @blur="inputFun1" @input="inputFun2">
//...
setup(props,context){
const inputRef=ref(props.modelValue || '')
const inputFun2=()=>{
//...
}
const inputFun2 = (e) =>{
const targetValue = e.target.value;
inputRef.val=targetValue
context.emit('updata:modelValue',targetValue);
}
},
//...
调用使用
<my-component v-model="comVal"/>
//...
const comVal=ref('hello')
多个值的的使用:
…未完待续