我对 Vue 比较陌生,正在开发我的第一个项目。我正在努力创建一个包含多个子组件和孙组件的表单。我遇到了一个问题,我需要能够生成表单的多个副本。因此,我将一些数据属性上移了 1 级。目前,形式为ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > BaseInput.Vue。我的问题是我需要通过 TheApplication 发出从 PersonalInformation 到 ApplicationPage 的更改。我很难弄清楚如何处理这种情况。我一直在寻找 Vue2 的解决方案,但没有找到 Vue3 的解决方案。
应用程序页面.vue
template
<TheApplication :petOptions="petOptions"
:stateOptions='stateOptions'
v-model="data.primary"
applicant="Primary"/>
script
data() {
return {
data: {
primary: {
personalInformation: {
first_name: "",
middle_name: "",
last_name: "",
date_of_birth: "",
phone: null,
email: "",
pets: "",
driver_license: null,
driver_license_state: "",
number_of_pets: null,
additional_comments: ""
},
},
},
}
},
Run Code Online (Sandbox Code Playgroud)
应用程序.Vue
<personal-information :petOptions="petOptions"
:stateOptions='stateOptions'
:personalInformation="modelValue.personalInformation"
@updateField="UpdateField"
/>
Run Code Online (Sandbox Code Playgroud)
methods: {
UpdateField(field, value) {
this.$emit('update:modelValue', {...this.modelValue, …Run Code Online (Sandbox Code Playgroud)