我想通过Introduction.vue显示名字和姓氏。在 InformationField.vue 中,我声明了 props。并在Introduction.vue中通过 v-model:propsname ="form.introduction.propsname" 调用它们。我在里面遇到错误
简介.vue
<template>
<form>
<InformationField
v-model:firstname="form.introduction.firstname"
v-model:lastname="form.introduction.lastname"
/>
</form>
</template>
<script>
import InformationField from './InformationField.vue';
export default {
components: {
InformationField,
},
setup(){
const form = ref({
introduction:{
firstname: '',
lastname: '',
}
})
}
};
</script>
信息字段.vue
<template>
<div>
<label>
Firstname
<input
type="text"
@input="$emit('update:firstname', $event.target.value)"
:value="firstname"
ref="firstnameRef"
placeholder="firstname"
/>
</label>
<label>
Lastname
<input
type="text"
@input="$emit('update:lastname', $event.target.value)"
:value="lastname"
placeholder="lastname"
/>
</label>
</div>
</template>
<script>
export default {
props: {
firstname: {
type: String,
default: "",
},
lastname: {
type: String,
default: "",
}
},
};
</script>