组件的v-model
基本使用:一个组件的v-model实际上是添加了两个属性:modelValue和@update:model-value:
<my-input :modelValue="message" @update:model-value="message=$event"></my-input>
在组件中就需要有对应的props和emits:
<template>
<div>
<input type="text" :value="modelValue" @input="btnClick">
</div>
</template>
<script>
export default {
props:{
modelValue: String
},
emits:["update:modelValue"],
methods: {
btnClick(event){
this.$emit("update:modelValue",event.target.value);
}
},
}
</script>
也可以通过计算属性来实现:
<template>
<div>
<input type="text" v-model="value">
</div>
</template>
<script>
export default {
props:{
modelValue: String
},
emits:["update:modelValue"],
computed:{
value:{
set(value){
this.$emit("update:modelValue",value);
},
get(){
return this.modelValue;
}
}
},
},
}
</script>
绑定多个属性:可以在v-model后面用:增加新的属性,对应的在组件中也会有props和emits,以v-model:title为例:
<my-input-2 v-model="message" v-model:title="title"></my-input-2>
props中需要的名称就是title,emits中需要的事件叫@update:title:
<template>
<div>
<input type="text" v-model="value">
<input type="text" v-model="titlec">
</div>
</template>
<script>
export default {
props:{
modelValue: String,
title:String
},
emits:["update:modelValue","update:title"],
computed:{
value:{
set(value){
this.$emit("update:modelValue",value);
},
get(){
return this.modelValue;
}
},
titlec:{
set(value){
this.$emit("update:title",value);
},
get(){
return this.title;
}
}
},
}
</script>