Grandparent component in VueJs 3 sends events to its grandparent component

Question

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

Answer 1

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

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved