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

Question

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

Answer 1

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

子项

在此处调用直接父级的 $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)
    }
  }
}

父级

由于是父级向祖先发出信号，因此请在此处声明发射。对于 ，只需使用 defineEmits() 方法来声明发射。请参阅文档。

Parent.vue

<Child /> <!-- No need to listen to the event here -->

export default {
   emits: ['custom-event'] // Register the emits
}

如果使用

<script setup>
  defineEmits(['custom-event']) // Register the emits
</script>

祖父母

然后在祖父母组件中监听事件。

GrandParent.vue

<Parent @custom-event="doSomething()" /> <!-- The event is being listened to in the grandparent component -->

Answer 2

这就是我的做法： codesandbox

Emits 仅接受两个参数，即发出的名称和发出的值。如果发出多个值，则必须将这些值作为单个对象发出。 在我的解决方案中，孙组件将字段名称和值作为单个对象发出

孙子

<input
    :value="personalInformation.first_name"
    @input="onInput('first_name', $event.target.value)"
    ...
>

onInput(field, value) {
  this.$emit("update-field", { field: field, value: value });
},

子对象捕获并重新发出，但是首先注意以父组件期望的格式发出（它需要整个 data.primary 对象因为这就是被设置为 v 模型的内容）

孩子

<grandchild
    :personalInformation="modelValue.personalInformation"
    @updateField="UpdateField"
  />

UpdateField({ field, value }) {
  const newVal = this.modelValue;
  newVal.personalInformation[field] = value;
  this.$emit("update:modelValue", newVal);
}

然后父组件会自动接收并更新 v-model data.primary 对象。

或者，我必须提到，您始终可以使用Pinia，Vue 的官方状态管理库（在一个组件中保存一些状态，从任何其他组件读取相同的状态）。当然有一个学习曲线，但它绝对值得学习，并且正是为了简化这种类型的情况。