如何將多個輸入值從 CHILD 組件傳遞到 Vue 中的父組件？

Question

** 任何人都知道如何傳遞多個子組件。 輸入值**

<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>

** 上面我的模板文件夾，請隨時向我詢問更多源代碼 **

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

** 這是我的父組件源代碼 **

Answer 1

似乎您已經知道自己想要什么以及需要什么。 並擁有增強您解決問題方法的技能。

父屬性可以用作更深層組件的 v-model。

如果您需要徹底管理某些值，您還可以將組件拆分為多個。 如果這不會花費您更多的測試或任何其他資源。

當您使用 emit 作為與父組件通信的通道時。 始終嘗試記住，您發出的有效負載可以根據您的需要/需要進行擴展和設計。 例如：

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

然后，您可以在將有效負載分解為您的任務需求的方法中以詳細方式管理發射。

<input @updateMultiple="advancedFunction">

在方法：

advancedFunction(emitPayload) {
const inputOne = emitPayload.var
const inputTwo = emitPayload.anotherVar
//...further logic
},

最后，您可以根據要在子組件中觸發它們的時間來管理發射。