Kaedah Vue untuk menghantar berbilang nilai input daripada komponen anak kepada komponen induk

Question

** Sesiapa sahaja tahu cara melepasi berbilang komponen kanak-kanak. Masukkan nilai**

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

**Di atas ialah folder Templat saya, sila hubungi saya untuk mendapatkan lebih banyak kod sumber**

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

** Ini ialah kod sumber komponen induk saya **

Answer 1

Nampaknya anda sudah tahu apa yang anda mahu dan perlukan. dan memiliki kemahiran yang meningkatkan pendekatan penyelesaian masalah.

Sifat induk boleh digunakan sebagai v-model pada komponen yang lebih dalam.

Anda juga boleh membahagikan komponen kepada berbilang jika anda perlu mengurus nilai tertentu dengan teliti. Jika ini tidak memerlukan lebih banyak ujian atau sebarang sumber lain.

Apabila anda menggunakan emit sebagai saluran untuk berkomunikasi dengan komponen induk. Sentiasa ingat bahawa muatan yang anda keluarkan boleh diskalakan dan direka bentuk mengikut keperluan anda. Contohnya:

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

Anda kemudian boleh mengurus pelancaran secara terperinci dengan cara yang memecahkan muatan ke dalam keperluan misi anda.

Dalam kaedah:

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

Akhir sekali, anda boleh menguruskan pelepasan berdasarkan bila anda mahu ia dicetuskan dalam komponen kanak-kanak.