VueJs 3发出事件从格兰德子组件到他的父级组件。

Question

我对Vue相对来说是个新手，并且正在做我的第一个项目。我正在创建一个包含几个子代和孙辈组件的表单。我遇到了一个问题，我需要生成一个表单的多个副本的能力。因此，我将一些数据属性移到了1层。目前，表单为ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > BaseInput.Vue。我的问题是，我需要发出从PersonalInformation到ApplicationPage的通过TheApplication的更改。我很难想出如何处理这种情况。我一直在为Vue2寻找解决方案，但没有为Vue3找到解决方案。

ApplicationPage.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: ""
          },
        },
      },
    }
  },

TheApplication.Vue

            <personal-information :petOptions="petOptions"
                                  :stateOptions='stateOptions'
                                  :personalInformation="modelValue.personalInformation"
                                  @updateField="UpdateField"
            />

  methods: {
    UpdateField(field, value) {
      this.$emit('update:modelValue', {...this.modelValue, [field]: value})
    },

PersonalInformation.vue

      <base-input :value="personalInformation.first_name"
                  @change="onInput('personalInformation.first_name', $event.target.value)"
                  label="First Name*"
                  type="text" class=""
                  required/>

methods: {
    onInput(field, value) {
      console.log(field + " " + value)
      // this.$emit('updateField', { ...this.personalInformation, [field]: value })
      this.$emit('updateField', field, value)
    },
  }

Answer 1

我就是这样做的：码箱

Emits只接受两个参数，即发出的名称和正在发出的值。如果发出多个值，则必须将值作为单个对象发出。在我的解决方案中，外孙组件将字段名和值作为单个对象发出。

外孙

<input
    :value="personalInformation.first_name"
    @input="onInput('first_name', $event.target.value)"
    ...
>

onInput(field, value) {
  this.$emit("update-field", { field: field, value: value });
},

子对象捕获并重新发射的，但是首先注意以父组件所期望的格式发出(它期望整个data.primary对象，因为这是被设置为v模型的)。

儿童

<grandchild
    :personalInformation="modelValue.personalInformation"
    @updateField="UpdateField"
  />

UpdateField({ field, value }) {
  const newVal = this.modelValue;
  newVal.personalInformation[field] = value;
  this.$emit("update:modelValue", newVal);
}

然后父组件自动接收和更新v模型data.primary对象.

或者，我必须指出，与处理在多个组件级别之间发出/传递对象不同，您可以始终使用皮尼亚，这是Vue的正式状态管理库(将某些状态保存在一个组件中，从任何其他组件读取相同的状态)。当然，有一个学习曲线，但它绝对值得学习，是为了简化这种情况。