Vue-Methode zum Übergeben mehrerer Eingabewerte von der untergeordneten Komponente an die übergeordnete Komponente

Question

** Jeder weiß, wie man mehrere untergeordnete Komponenten übergibt. Wert eingeben**

<template>
  <div>
    <v-row align="center">
      <v-select
        :items="languages"
        v-model="selectedOption"
        @input="changeLanguage()"
        outlined
        solo
        class="m-3"
        cols="12"
        sm="2"
        label="Select Language"
      ></v-select>

      <v-combobox
        @input-content="changeContent()"
        v-model="contents2"
        outlined
        solo
        class="d-inline-flex"
        cols="12"
        sm="2"
        label="Input Content"
      ></v-combobox>
    </v-row>
  </div>
</template>

**Das Obige ist mein Vorlagenordner, bitte fragen Sie mich gerne nach mehr Quellcode**

<Child
        v-for="count in sec"
        :key="count"
        v-model="selectedLanguage"
        :languages="languages"
        :contents="contents"
        :input="onChangeChild"
        :inputContent="onChangeContent"
      />

** Dies ist der Quellcode meiner übergeordneten Komponente **

Answer 1

看来您已经知道自己想要什么和需要什么。 并具备增强解决问题方法的技能。

父级属性可以用作更深层次组件上的 v-model。

如果您需要彻底管理某些值，您还可以将组件拆分为多个。如果这不会花费您更多的测试或任何其他资源。

当你使用emit作为与父组件通信的通道时。始终记住，您发出的有效负载可以根据您的需要进行扩展和设计。例如：

this.emit("updateMultiple", {
var:complexObject
anotherVar: moreComplexObject
})

然后，您可以在将有效负载分解为您的任务需求的方法中详细管理发射。

在方法中：

advancedFunction(emitPayload) {
const inputOne=emitPayload.var
const inputTwo=emitPayload.anotherVar
//...进一步的逻辑
},

最后，您可以根据您想要在子组件中触发发射的时间来管理发射。