suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die übergeordnete Komponente in VueJs 3 sendet Ereignisse an ihre übergeordnete Komponente

Ich bin relativ neu bei Vue und arbeite an meinem ersten Projekt. Ich versuche, ein Formular mit mehreren untergeordneten und untergeordneten Komponenten zu erstellen. Ich bin auf ein Problem gestoßen, bei dem ich mehrere Kopien eines Formulars erstellen muss. Daher habe ich einige Datenattribute um eine Ebene nach oben verschoben. Derzeit ist das Formular ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > Mein Problem ist, dass ich Änderungen von PersonalInformation über TheApplication an ApplicationPage senden muss. Es fällt mir schwer herauszufinden, wie ich mit dieser Situation umgehen soll. Ich habe nach einer Lösung für Vue2 gesucht, aber keine Lösung für Vue3 gefunden.

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})
    },

persönliche Informationen.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)
    },
  }


P粉251903163P粉251903163445 Tage vor807

Antworte allen(2)Ich werde antworten

  • P粉037880905

    P粉0378809052023-11-04 14:55:06

    对于任何不想链接事件发出的人，子对象上都有父对象，它也可用于发出事件。请务必在父级中注册发射，以避免控制台中出现警告。

    子项

    在此处调用直接父级的 $emit。

    Child.vue

    <input @input="$parent.$emit('custom-event', e.target.value) />

    或者使用方法：

    <input @input="handleInput" />
    export default {
  methods: {
    handleInput(e) {
      this.$parent.$emit('custom-event', e.target.value)
    }
  }
}

    父级

    由于是父级向祖先发出信号，因此请在此处声明发射。对于