vue2
vue2组件使用v-model时相当于:value和@input,自组件通过props接收和$emit即可:
// 子组件
<template>
<input type="text" v-model="valueC">
</template>
<script>
export default {
props: {
value: String,
},
computed: {
valueC: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
vue3
默认情况下,组件上的 v-model
使用 modelValue
作为 prop 和 update:modelValue
作为事件。
我们可以通过向 v-model
传递参数来修改这些名称,并且可以有多个不同名称的v-model
<user-name
v-model:firstName="firstName"
v-model:lastName="lastName"
></user-name>
// 子组件
<template>
<input type="text" v-model="firstNameC">
<input type="text" v-model="lastNameC">
</template>
<script>
export default {
props: {
firstName: String,
lastName: String
},
emits: ['update:firstName', 'update:lastName'],
computed: {
firstNameC: {
get() {
return this.firstName
},
set(val) {
this.$emit('update:firstName', val)
}
},
lastNameC: {
get() {
return this.lastName
},
set(val) {
this.$emit('update:lastName', val)
}
},
}
}
</script>