简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Grandparent component in VueJs 3 sends events to its grandparent component

I am relatively new to Vue and working on my first project. I'm trying to create a form with multiple child and grandchild components. I've run into a problem where I need to be able to generate multiple copies of a form. Therefore, I moved some data attributes up 1 level. Currently, the form is ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > BaseInput.Vue. My problem is that I need to emit changes from PersonalInformation to ApplicationPage via TheApplication . I'm having a hard time figuring out how to handle this situation. I've been looking for a solution for Vue2 but haven't found a solution for 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})
    },

Personal information.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粉251903163350 days ago716

reply all(2)I'll reply

  • P粉037880905

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

    For anyone who doesn't want to chain event emitting, there is a parent object on the child object which can also be used to emit events. Be sure to register the launch in the parent to avoid warnings in the console.

    Subitems

    Call the direct parent's $emit here.

    Child.vue

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

    Or how to use:

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

    Father

    Since it is the parent that signals the ancestor, declare the emission here. For