Komponen datuk nenek dalam VueJs 3 menghantar acara kepada komponen datuk neneknya

Question

Saya agak baru menggunakan Vue dan sedang menyiapkan projek pertama saya. Saya cuba membuat borang dengan berbilang komponen anak dan cucu. Saya telah menghadapi masalah di mana saya perlu menjana berbilang salinan borang. Oleh itu, saya mengalihkan beberapa atribut data ke atas 1 tahap. Pada masa ini, borang tersebut adalah ApplicationPage.Vue > Masalah saya ialah saya perlu mengeluarkan perubahan daripada PersonalInformation kepada ApplicationPage melalui TheApplication . Saya mengalami kesukaran untuk memikirkan bagaimana untuk menangani situasi ini. Saya telah mencari penyelesaian untuk Vue2 tetapi tidak menemui penyelesaian untuk 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})
    },

maklumat peribadi.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

Bagi sesiapa yang tidak mahu memautkan peristiwa yang dipancarkan, terdapat objek induk pada objek anak yang juga boleh digunakan untuk memancarkan peristiwa. Pastikan anda mendaftar pelancaran dalam induk untuk mengelakkan amaran dalam konsol.

Kanak-kanak

Hubungi terus ibu bapa $emit di sini.

Child.vue

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

Atau cara penggunaan:

<input @input="handleInput" />

export default {
  methods: {
    handleInput(e) {
      this.$parent.$emit('custom-event', e.target.value)
    }
  }
}

Ibu bapa

Oleh kerana ibu bapa yang memberi isyarat kepada nenek moyang, isytiharkan pelepasan di sini. Untuk kaedah

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved