recherche

Maison  >  Questions et réponses  >  le corps du texte

Le composant grand-parent dans VueJs 3 envoie des événements à son composant grand-parent

Je suis relativement nouveau sur Vue et je travaille sur mon premier projet. J'essaie de créer un formulaire avec plusieurs composants enfants et petits-enfants. J'ai rencontré un problème où je dois pouvoir générer plusieurs copies d'un formulaire. Par conséquent, j'ai déplacé certains attributs de données vers le haut d'un niveau. Actuellement, le formulaire est ApplicationPage.Vue > TheApplication.Vue > Mon problème est que je dois émettre des modifications de PersonalInformation vers ApplicationPage via TheApplication . J'ai du mal à comprendre comment gérer cette situation. J'ai cherché une solution pour Vue2 mais je n'ai pas trouvé de solution pour 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: ""
          },
        },
      },
    }
  },

L'Application.Vue

<personal-information :petOptions="petOptions"
                                  :stateOptions='stateOptions'
                                  :personalInformation="modelValue.personalInformation"
                                  @updateField="UpdateField"
            />
methods: {
    UpdateField(field, value) {
      this.$emit('update:modelValue', {...this.modelValue, [field]: value})
    },

informations personnelles.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粉251903163392 Il y a quelques jours751

répondre à tous(2)je répondrai

  • P粉037880905

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

    Pour tous ceux qui ne souhaitent pas lier l'événement émis, il y a un objet parent sur l'objet enfant qui peut également être utilisé pour émettre des événements. Assurez-vous d'enregistrer le lancement dans le parent pour éviter les avertissements dans la console.

    Enfants

    Appelez le parent direct $emitici.

    Enfant.vue

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

    Ou comment l'utiliser : 

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

    Parent

    Puisque c'est le parent qui signale l'ancêtre, déclarez l'émission ici. Pour